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.

Page Contents

Example

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

<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: <small>(no spaces or line-breaks when used)</small>

'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 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)`

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...
});