-1

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

user2513485
  • 25
  • 1
  • 4

2 Answers2

0

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.

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • Thank for your reply. Being a beginner I don't know how to properly do that and the only preload plugin is Lazy Load which does not help in this case. Can you show me a quick example ? After that I will implement and modify it accordingly. Thank you – user2513485 Sep 17 '13 at 10:59
  • No, I'm afraid, I can not :) I can not program all of it for you. You will need to learn or ask specific questions one by one until you reach your goal. I gave you a possible method you were asking for. Don't expect anybody to do it for you here. – Alvaro Sep 17 '13 at 11:01
  • Sorry if you miss understood me, I don't want any piece of code, I was only asking for an input, a way to do it. But you still helped me a lot. Thank you – user2513485 Sep 17 '13 at 11:14
0

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');
 });
});
Igor Goldny
  • 50
  • 3