lazyload

Delay loading of images in long web pages. Images outside of viewport wont be loaded before user scrolls to them.

npm install lazyload
2 downloads in the last week
7 downloads in the last month

h1. Lazy Load Plugin for jQuery

Lazy Load delays loading of images in long web pages. Images outside of viewport wont be loaded before user scrolls to them. This is opposite of image preloading.

Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

Lazy Load is inspired by "YUI ImageLoader":http://developer.yahoo.com/yui/imageloader/ Utility by Matt Mlinac.

h2. How to Use?

Lazy Load depends on jQuery. Include them both in end of your HTML code:



You must alter your HTML code. Put the place holder image into src attribute. Demo pages use 1×1 pixel grey gif. URL of the real image must be put into data-original attribute. It is good idea to give Lazy Loaded image a specific class. This way you can easily control which images plugin is binded to. Note that you should have width and height attributes in your image tag.

then in your code do:

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

This causes all images of class lazy to be lazy loaded.

More information on "Lazy Load":http://www.appelsiini.net/projects/lazyload project page.

h1. License

All code licensed under the "MIT License":http://www.opensource.org/licenses/mit-license.php. All images licensed under "Creative Commons Attribution 3.0 Unported License":http://creativecommons.org/licenses/by/3.0/deed.en_US. In other words you are basically free to do whatever you want. Just don't remove my name from the source.

h1. Changelog

h3. 1.8.4

h3. 1.8.3

h3. 1.8.2

h3. 1.8.1

h3. 1.8.0

h3. 1.7.1

h3. 1.7.0

h3. 1.6.0

  • Rename original attribute to data-original to be HTML5 friendly.
  • Remove all code regarding placeholder and automatically removing src attribute. It does not work with modern browsers. Must use data-original attribute instead.
  • Add support for James Padolseys "scrollstop event":http://james.padolsey.com/javascript/special-scroll-events-for-jquery/. Use when you have hundreds of images.
  • Add skip_invisible parameter. When true plugin will skip invisible images. ("Valentin Zwick":https://github.com/vzwick)
  • Renamed failurelimit parameter to failure_limit. Old version will still work couple of versions.

h3. 1.5.0

  • Support for removing the src attribute already in HTML. This is not a drop in solution but gives additional speed for those who need it. (Jeremy Pollock)

h3. 1.4.0

  • When scrolling down quickly do not load the images above the top. (Bart Bruil)

h3. 1.3.2

  • Support for scrolling within a container.
  • Fixed IE not loading images.
npm loves you