Question

If I don’t want the image to be downloaded from server , until user scroll to there , which event should I capture ?

And how ?

Answer 1

I used this plugin (Lazy Load) in a project and it works pretty fine.

• http://www.appelsiini.net/projects/lazyload
• http://www.appelsiini.net/projects/lazyload/enabled_fadein.html

And here’s how, the trick is to put a blank placeholder image, and add a data information with the real image path

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

then in your code do:

$("img.lazy").lazyload();