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ć