Skip to main content
Figuration v3 Preview Available!
Widgets

Bring interactivity to your site with a selection of jQuery widgets (plugins) all built with accessibility and usability in mind.

Lazy lazy.js

Lazy delays loading of images outside of the viewport (visible part of the page) until the user scrolls them into view. In some cases this can help reduce both server load and overall bandwidth use.

Contents

Example

A lazy loaded image with delay and a fade in animation.

Test pattern
<img src="" data-cfw="lazy" data-cfw-lazy-delay="1000" data-cfw-lazy-effect="fadeIn" data-cfw-lazy-speed="1000" data-cfw-lazy-src="test.gif" width="360" height="202" alt="Test pattern" />

Usage

Default Placeholder

In the case where the src attribute is missing, for set to an emtpy string, a placeholder image is inserted via a data:image string on the src attribute that equates to a 1x1px transparent GIF.

Default placeholder: (no spaces or line-breaks when used)

'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'

Image Dimensions

If you do not wish to have the document height change when an image is loaded, then it would be a good idea to specify the width and height dimensions of the image either through attributes or CSS.

Via Data Attributes

At a minimum, add data-cfw="lazy" along with a data-cfw-lazy-src="sourceURL" attribute to an image to replace the blank placeholder with the image found at sourceURL.

Via JavaScript

Enable manually with:

$('#myImg').CFW_Lazy();

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-cfw-lazy, as in data-cfw-lazy-src=image.png.

Name Type Default Description
src string null The URL or path for the source image to be displayed.
throttle integer 250 Timeout rate (milliseconds) for the throttle function helps to decrease unnecessary function calls through scroll or resize events.
trigger string 'scroll resize'

How lazy load is triggered. You may pass multiple triggers; separate them with a space.

Custom event names are supported when standard browser events are not applicable.

delay integer 0 Delay time (milliseconds) to wait before invoking the show animation specified by the effect option.
effect string 'show' The function name to be called when the show method has been triggered. By default the jQuery function .show() is used, but in theory any jQuery based effect can be used including ones from jQuery UI.
speed integer 0 Speed of animation (milliseconds) - corresponds the desired animation speed of the animation specified by the effect option.
threshold integer 0 Pixel offset from the viewport to use when calculating the invoking of the show method. Can be of positive of negative value. For example, setting threshold to 200 causes image to load 200 pixels before it appears within the viewport.
container string | node the window object Specifies a containing element, such as div with scrollbar, where the trigger event callbacks should be listened for.
invisible boolean false

There are cases when you have images which are in viewport but not :visible. To improve performance the lazy widget ignores .not(":visible") by default. If you want to load these images set invisible to true.

Browser Note

Webkit browsers will report images with without width and height as not .not(":visible"). This causes images to appear only when you scroll a bit. Either fix your image tags or set invisible to true.

Methods

.CFW_Lazy(options)</dt>

Activates the image as a lazy loaded element. Accepts an optional options object.

$('#myImg').CFW_Lazy({
    src: 'image.png'
});

.CFW_Lazy('show')

Load the specified image source.

Events

Event callbacks happen on the image element.

Event Type Description
init.cfw.lazy This event fires after the image item is initialized.
beforeShow.cfw.lazy This event is fired immediately when the show method is called.
afterShow.cfw.lazy This event is fired when a lazy loaded image source has been made visible to the user (will wait for specified effect to complete).

$('#myImg').on('afterShow.cfw.lazy', function () {
  // do something...
});