Skip to content
jQuery plugin for lazy loading images
HTML JavaScript
Find file
View #89
Pull request Compare This branch is 1 commit ahead, 20 commits behind master.
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
CHANGELOG.textile Use Markdown for README Feb 26, 2015
CONTRIBUTING.md
Gruntfile.js Update headers Apr 2, 2015
README.md Use Markdown for README Feb 26, 2015
bower.json Change jquery_lazyload to jquery.lazyload May 28, 2015
disabled.html Resize GitHub button. Nov 16, 2013
enabled.html Resize GitHub button. Nov 16, 2013
enabled_ajax.html Resize GitHub button. Nov 16, 2013
enabled_background.html Resize GitHub button. Nov 16, 2013
enabled_container.html
enabled_fadein.html Remove debug code. Jan 15, 2014
enabled_gazillion.html Resize GitHub button. Nov 16, 2013
enabled_noscript.html Resize GitHub button. Nov 16, 2013
enabled_timeout.html Improve wording on demo page. Sep 12, 2014
enabled_wide.html
enabled_wide_container.html Resize GitHub button. Nov 16, 2013
jquery.lazyload.js Use ! for comment preservation Apr 2, 2015
jquery.lazyload.min.js Update headers Apr 2, 2015
jquery.scrollstop.js Make JSHInt happy. Sep 19, 2013
jquery.scrollstop.min.js Update headers Apr 2, 2015
lazyload.jquery.json Prepare for 0.9.5 Apr 2, 2015
package.json Prepare for 0.9.5 Apr 2, 2015

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.