2

I have UL tag which has around 2000 images in LI tag under it. They display as a carousel. I am trying to Lazy Load them, They show a Loader gif and then show the Original Image.

<li>
    <img src="http://placehold.it/350x150&text=image1" />
</li>

But it this creates a stress to the server with 2000 requests at a single time. I want to Load them sequentially as a batch. Load first 100 images and then load next 100.

The images are added directly through jquery from webservices. So if I try to "Lazy load using container", they dont work well as carousel keeps changing the images with the help of jquery.

So basically am looking to Lazy load the images as a batch.

If I have the code as shown in this fiddle link

http://jsfiddle.net/kd478/

Madhusudhan
  • 31
  • 2
  • Have you considered something along the lines of this: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport so you'd only load the visible ones + maybe the next 10 or so using nextall – JF it Mar 04 '14 at 16:33
  • @JFit Problem is i am not able to load it based on visible container as the code is already written for carousel which moves the UL tag towards left by 20px each time when we hover on the right button of the carousel. So thats why i wanted to load the images as a batch. Eg. : Under the UL tag if I have 2000 images, load the first 100 and then load the next 100 sequentially till it reaches the 2000 – Madhusudhan Mar 04 '14 at 16:39

0 Answers0