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.
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 Browser NoteWebkit browsers will report images with without |
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...
});