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.
A lazy loaded image with delay and a fade in animation.
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)
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
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
Enable manually with:
data-cfw-lazy, as in
|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.|
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||string||'show'||The function name to be called when the
|speed||integer||0||Speed of animation (milliseconds) - corresponds the desired animation speed of the animation specified by the
Pixel offset from the viewport to use when calculating the invoking of the
|container||string | node||the
||Specifies a containing element, such as div with scrollbar, where the
There are cases when you have images which are in viewport but not
Webkit browsers will report images with without
Activates the image as a lazy loaded element. Accepts an optional options
Load the specified image source.
Event callbacks happen on the image element.
|init.cfw.lazy||This event fires after the image item is initialized.|
|beforeShow.cfw.lazy||This event is fired immediately when the
|afterShow.cfw.lazy||This event is fired when a lazy loaded image source has been made visible to the user (will wait for specified