Skip to content
Lazyloads images below the fold
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Quick start

Example Html

<div class="products">
    <ul class="product-set">
        <li class="product">
            <img data-src="/path/to/image.jpg" width="170" height="300" class="ctg-lazyload-img" />
                <img src="/path/to/image.jpg" width="170" height="300" />
        <li class="product">
            <div data-src="/path/to/image.jpg" class="ctg-lazyload-img"></div>
                <div style="background-image: url('/path/to/image.jpg');"></div>


// doc ready



selector: '.ctg-lazyload-img' (string)

jQuery selector used to match img elements within element.

offset: 200 (number)

Images that appear below the window height + offset will be loaded in.

transitionSpeed: 500 (number)

Sets the speed of image fade.

afterLoad: $.noop (function)

Callback runs as each image has loaded. The loaded image/element is passed to this function.

autoDestroy: true (boolean)

When set to true the lazyload widget will be destroyed once the page has been scrolled to the bottom.


refresh .lazyload('refresh', [live])

Refreshes internally calculated offsets of images, passing in live as true will re-query the DOM for images.

destroy .lazyload('destroy')

Cleans up after itself by unbinding scroll events etc.

Something went wrong with that request. Please try again.