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 Edge 15, Chrome 72 and Firefox 65, and should work in all modern browsers (support based on Browserslist configuration).

Test

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

License

MIT © Ivan Nikolić

Changelog

[3.0.0][] - 2021-05-05

Changed

• Update dependencies
• Make module ESM only

Removed

• Breaking: Drop IE support, supported browser is Edge 15+