delay-image

delay-image

Delay image load until it’s in viewport.

Install

npm install delay-image --save

Usage

By default, it will look for data-src attribute on image element and add src attribute when image has been successfully loaded.

<img id="jackie" data-src="jackie.jpg" />

import delayImage from 'delay-image';

delayImage(document.querySelector('#jackie'), {
	onEnter: (element) => {
		// Image in viewport!
	}
});

API

delayImage(element, options)

Delay image load until it’s in viewport.

element

Type: Element

Image element.

options

Type: Object

Property	Type	Default value	Description
threshold	number	0	Positive value in pixels which will signal plugin to check for image presence earlier in document.
scrollResizeHandler	Function	300	Window scroll and resize event handler. Useful if you want to use throttle or debounce methods on those events. Should return new handler (original or wrapped).
imageSource	string	element.getAttribute('data-src')	Image URL to load.
onEnter	Function	() => {}	Callback to execute if image is within viewport (useful for loader initialization).
onSuccess	Function	(element) => { element.src = imageSource; }	Callback to execute if image has been successfully loaded. If you define this callback, you need to add src attribute yourself.
onFail	Function	() => { ... }	Callback to execute if image has failed to load.

instance.destroy()

Destroy instance.

Browser support

Tested in IE9+ and all modern browsers.

Test

For automated tests, run npm run test:automated (append :watch for watcher support).

License

MIT © Ivan Nikolić

Changelog

[2.0.0][] - 2020-02-20

Changed

• Abstract scroll and resize event handling, so events could be wrapped with more functionality (e.g. throttle)
• Lock image-promise to 6.0.2 since we need IE9 support

Added

• scrollResizeHandler property

Removed

• debounce property