Page with 100 images loading

Question

I have a page where I have a slideshow (bxslider) with 100+ images and the first time I access the page it takes more than 10 seconds to load and even after the page is displayed I don't see any image. Only after I reload the page the slider begins to work. I have re-sized all the images to be exactly the right dimensions ( as suggested by PageSpeed Insight by Google ) but the loading time is still too much the first time. I also tried with the plugin Galleria but with no luck. Lazy load does not help here because the images are part of a slider and are not displayed all at the same time, I already tried.

So my question is if there is a method to only load the images once I lick the next/prev buttons and not load them all together when the page loads.

I want to mention that in the bxslider settings the option preloadImages is set to visible, but this still does not change the loading time.

Any help is appreciated. Thank you

Answer 1

you need to lazy load them but instead of the traditional way of lazy loading which looking for a visible images, make it depend on the user interaction with your slider.

instead of loading images with src attr, replace it with data-src and on click next or previous replace data-src back to src, on the images that you display now.

if you have 100 images, and you want to get better ux you should also preload few of the next images that the user gonna slide to.

$('.next, . prev').on('click', function(){
 $('.slider .visible-images').attr('src', function(){
  return $(this).data('src');
 });
});

Answer 2

What you should do in this case, is loading the first 2 or 3 images of the slide (so you can move to the next or previous slide in a fast way) and then load dynamically the rest of images as you move the next or previous slide. (this still being a kind of lazy load, not based on the scrolling, but on the active slide)

You have to detect in which slide you are and load the next/prev or next/prev 2 ones accordingly.

This way the site will load fast (as you will only need to load 3 images) and the rest will load only when needed.

Nobody loads 100 images at once. That's just insane, not only for users, but for SEO purposes as well as for the data transfer.