Skip to content
LazyLoad allows you to defer image loading until the user scrolls down to each image.
JavaScript
Find file
Pull request Compare This branch is 2 commits ahead, 2 commits behind darkwing:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Assets
Docs
Source
README.md
package.yml

README.md

LazyLoad

LazyLoad allows you to defer image loading until the user scrolls down to each image. Using LazyLoad can easily save you bandwidth and allow the page to load faster for the user. This plugin takes only a minute to implement so using LazyLoad is a must.

Screenshot

How to Use

LazyLoad should be initialized during the DOMReady event. There are no required arguments -- only options.

# JS With Load Trigger on Scroll
/* LazyLoad instance */
var lazyloader = new LazyLoad({
    range: 200,
    realSrcAttribute: "data-src",
    useFade: true,
    elements: 'img',
    container: window
});

# JS With Manual Load Trigger
var lazyLoader = new LazyLoad({
    container: window,
    elements: 'img',
    useScrollLoad: false
});

lazyLoader.manualLoad()

#HTML
<img src="http://davidwalsh.name/dw-content/blank.gif" data-src="http://davidwalsh.name/dw-content/mexico-2009/small/102_1152.jpg" />
<!-- or -->
<img data-src="http://davidwalsh.name/dw-content/mexico-2009/small/102_1152.jpg" />

For specific usage and options, please read the documentation or visit http://davidwalsh.name/js/lazyload

Something went wrong with that request. Please try again.