Delay-image NPM

delay-image

Delay image load until it’s in viewport.

npm install delay-image --save

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!
	}
});

Delay image load until it’s in viewport.

Type: Element

Image element.

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.

Destroy instance.

Tested in Edge 15, Chrome 72 and Firefox 65, and should work in all modern browsers (support based on Browserslist configuration).

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

3 years ago

4 years ago

5 years ago