Skip to content
jQuery plugin for lazy loading images
HTML JavaScript
Failed to load latest commit information.
img Use lorempixel instead of local images. Dec 17, 2012
.gitignore Be like all the cool guys. Sep 19, 2013
.jshintrc Be like all the cool guys. Sep 19, 2013
CHANGELOG.textile Merge branch 'master' of https://github.com/micmro/jquery_lazyload in… Mar 26, 2016
CONTRIBUTING.md Remove part about tests from README Sep 27, 2014
Gruntfile.js Merge branch 'master' of https://github.com/micmro/jquery_lazyload in… Mar 26, 2016
LICENSE.md Add a copy of the MIT license May 14, 2015
README.md Add syntax highlighting to README code snippets Jul 10, 2015
bower.json Change jquery_lazyload to jquery.lazyload Mar 26, 2016
disabled.html Resize GitHub button. Nov 16, 2013
enabled.html Prepare for 1.9.7 Aug 26, 2015
enabled_ajax.html Prepare for 1.9.7 Aug 26, 2015
enabled_background.html Prepare for 1.9.7 Aug 26, 2015
enabled_container.html Prepare for 1.9.7 Aug 26, 2015
enabled_fadein.html Prepare for 1.9.7 Aug 26, 2015
enabled_gazillion.html Prepare for 1.9.7 Aug 26, 2015
enabled_noscript.html Prepare for 1.9.7 Aug 26, 2015
enabled_timeout.html Prepare for 1.9.7 Aug 26, 2015
enabled_wide.html Prepare for 1.9.7 Aug 26, 2015
enabled_wide_container.html Prepare for 1.9.7 Aug 26, 2015
jquery.lazyload.js Merge pull request #269 from samccone/sjs/allow-unbind Mar 26, 2016
jquery.lazyload.min.js Prepare for 1.9.7 Aug 26, 2015
jquery.scrollstop.js Make JSHInt happy. Sep 19, 2013
jquery.scrollstop.min.js Prepare for 1.9.7 Aug 26, 2015
lazyload.jquery.json Prepare for 1.9.7 Aug 26, 2015
package.json Merge branch 'master' of https://github.com/micmro/jquery_lazyload in… Mar 26, 2016

README.md

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 Utility by Matt Mlinac.

How to Use?

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

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

You must alter your HTML code. 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.

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

then in your code do:

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

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

More information on Lazy Load project page.

Install

You can install with bower or npm.

$ bower install jquery.lazyload
$ npm install jquery-lazyload

License

All code licensed under the MIT License. All images licensed under Creative Commons Attribution 3.0 Unported License. In other words you are basically free to do whatever you want. Just don't remove my name from the source.

Something went wrong with that request. Please try again.