Kist-delayimages NPM

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

Options defined as `Object`

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.

Options defined as `String`

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.

<img data-src="example.png" data-alt="Example" />

Lazyload images.

$('img').delayImages();

$('img').delayImages({
	method: 'lazyload'
});

Postpone images with default options.

$('img').delayImages({
	method: 'postpone'
});

Callback when postponed images with default options are in viewport.

$('img').delayImages({
	method: 'postpone',
	success: function ( images ) {
		console.log('Images are in viewport!');
	}
});

Callback when postponed images with 300px threshold and 300ms debounce are in viewport.

$('img').delayImages({
	method: 'postpone',
	threshold: 300,
	debounce: 300,
});

$('img').delayImages({
	method: 'postpone',
	threshold: 300,
	debounce: 300,
	start: function ( images ) {
		cb();
	},
	success: function ( images ) {
		cb();
	}
});

Destroy plugin instance.

$('img').delayImages('destroy');

AMD and global

define(['kist-delayimages'], cb);

window.$.fn.delayImages;

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.