kist-delayimages
Load images via postpone or lazyload method.
Installation
npm install kist-delayimages --save bower install kist-delayimages --save
API
Following API description assumes you use this module as jQuery plugin.
$(Element).delayImages([options])
Returns: jQuery
options
Type: Object|String
Object
Options defined as Property | Type | Description | Default value |
---|---|---|---|
method |
String |
Image loading method to use. Possible values are lazyload and postpone . |
lazyload |
threshold |
Number |
Value in pixels which will signal plugin to check for image presence earlier in document. | 0 |
debounce |
Number |
Time in milliseconds which will be used to debounce callback execution. | 300 |
srcDataProp |
String |
data property with image source. |
src |
altDataProp |
String |
data property with image alt text. |
alt |
start |
Function |
Detailed description | $.noop |
success |
Function |
Detailed description | $.noop |
start
If called with lazyload method, callback will execute before all images have been loaded.
If called with postpone method, callback will execute if there are images inside viewport and before those images have been loaded.
Provides one argument: all lazyloaded images (if lazyload) or all images in viewport (if postpone). It also triggers delayimagesstart
event on document
with same arguments.
success
If called with lazyload method, callback will execute after all images have been loaded.
If called with postpone method, callback will execute if there are images inside viewport and after those images have been loaded.
Provides one argument: all lazyloaded images (if lazyload) or all images in viewport (if postpone). It also triggers delayimagessuccess
event on document
with same arguments.
String
Options defined as destroy
Destroy plugin instance.
$.fn.delayImages.defaults.lazyload
Type: Object
Change defaults for lazyload method.
$.fn.delayImages.defaults.postpone
Type: Object
Change defaults for postpone method. It will inherit properties from lazyload method defaults.
Examples
Default structure for delayed images.
Lazyload images.
; ;
Postpone images with default options.
;
Callback when postponed images with default options are in viewport.
;
Callback when postponed images with 300px threshold and 300ms debounce are in viewport.
; ;
Destroy plugin instance.
;
AMD and global
; window$fndelayImages;
Caveats
For postponed images to load properly (only visible in viewport), some dimension (height) needs to be set for them, otherwise browser will try to download every image in collection.
Browser support
Tested in IE8+ and all modern browsers.
License
MIT © Ivan Nikolić