0

I have about 100.000 images - max 960 x 540px.

Is it recommendable to load all images at once but only the first 100 set to be visible on screen?

And how can I do that using CSS?

Something like:

.image {
    display:none;
}

.image:nth(0 - 100){
    display:inline-block;
}
Pranav C Balan
  • 113,687
  • 23
  • 165
  • 188
  • Related: [Does “display:none” prevent an image from loading?](https://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading) – showdev May 08 '18 at 17:06
  • 1
    I think you are going to run into performance issues with that many images on a single page. CSS can hide them, but they are still loaded. I think you might have to rely on a JavaScript solution to do what you want, and not slow down the browser – Chris Barr May 08 '18 at 17:39
  • @ChrisBarr, could you give me an example or link for the javascript solution? –  May 08 '18 at 17:44
  • 1
    @puerto just search for "lazy-load" images, that' what you'd call this technique. Here are some examples: https://css-tricks.com/lozad-js-performant-lazy-loading-images/ and https://sitepoint.com/five-techniques-lazy-load-images-website-performance/ – Chris Barr May 08 '18 at 18:00

1 Answers1

1

There is no :nth selector in css, you need to use :nth-child pseudo-class selector. Then update the selector to get the rest of the images(101, 102,... => n + 101) and then apply the style to hide them.

/* set default styles here */
.image {
    display:inline-block;
}

/* following would select 101, 102,... since value of 'n' starts from 0 */ 
.image:nth-child(n + 101){
    display:none;
}

In case there are some other siblings tags then use :nth-of-type pseudo-selector. 
.image:nth-of-type(n + 101){
    display:none;
}

Also refer : Does "display:none" prevent an image from loading?

Pranav C Balan
  • 113,687
  • 23
  • 165
  • 188