Skip to content

Instantly share code, notes, and snippets.

@steppefox

steppefox/js_lazy_loading_images.md

Created October 23, 2013 17:57
Show Gist options
  • Save steppefox/7123442 to your computer and use it in GitHub Desktop.
Save steppefox/7123442 to your computer and use it in GitHub Desktop.
Download ZIP
Lazy loading images
Raw
js_lazy_loading_images.md

Some of the answers here are for inifite page. What Salman is asking is lazy loading of images.

Plugin: http://www.appelsiini.net/projects/lazyload

Demo: http://www.appelsiini.net/projects/lazyload/enabled.html

EDIT: How do these plugins work?

This is a simplified explanation:

Find window size and find the position of all images and their sizes

If the image is not within the window size, replace it with a placeholder of same size

When user scrolls down, and position of image < scroll + window height, the image is loaded

answered Feb 25 '11 at 13:18

Alec Smart

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment