Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Lazyloads images below the fold
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.gitattributes
.gitignore
README.md
ctg-lazyload.css
jquery.ctg.lazyload.js

README.md

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

JavaScript

// doc ready
$('.products').lazyload();

DOCS

Options

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.

Methods

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.