How lazy loading images using JavaScript works?

Question

I am curious about how lazy loading images, images that will be loaded when scrolled to them, works.

Any hint?

Answer 1

Here's a how-to, using plugins: http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/ here's the jquery plugin: http://www.appelsiini.net/projects/lazyload

basically you put a dummy image in your src attribute and add another attribute for the actual image, JS detects the scroll position of the page, and loads the image data once you get close enough to the image. it does that by replacing the src with the source of the actual image.

here's another explanation: http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/