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');
 });
});