https://github.com/reecelucas/lazily

Lightweight image lazy-loader using the intersection observer API
https://github.com/reecelucas/lazily

es2015 intersection intersection-observer javascript-library lazy-loading lazyload observer performance

Last synced: 9 days ago
JSON representation

Lightweight image lazy-loader using the intersection observer API

• Host: GitHub
• URL: https://github.com/reecelucas/lazily
• Owner: reecelucas
• License: mit
• Created: 2018-06-11T11:17:11.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T19:33:38.000Z (about 2 years ago)
• Last Synced: 2024-12-06T22:40:23.801Z (29 days ago)
• Topics: es2015, intersection, intersection-observer, javascript-library, lazy-loading, lazyload, observer, performance
• Language: JavaScript
• Size: 549 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Lazily.js

A lightweight (1.8kB min, 950b min + gzip) image lazy-loading utility using the [Intersection Observer API](https://developer.mozillaorg/en-US/docs/Web/API/Intersection_Observer_API).

## Browser Support

For Intersection Observer API support please refer to [canIuse](https://caniuse.com/#feat=intersectionobserver). In unsupporting browsers it's necessary to load a [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) in order to observe images on scroll. In the absence of native or polyfilled support, all images are loaded immediately.

## Install

Install with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/lang/en/):

npm:

```Bash

npm install lazily --save

```

yarn:

```Bash

yarn add lazily

```

## Example Usage

```html





```

```JavaScript

import lazily from 'lazily.js';

/**

 * Call the `lazily` factory function to return a `lazily`

 * object exposing three methods:

 *

 * 1. init

 * 2. destroy

 * 3. update

 */

const lazyLoad = lazily();

// 1. Begin watching images on scroll.

lazyLoad.init();

/**

 * 2. Stop watching images on scroll, and destroy the Intersection Observer instance

 * created by calling the `init` method.

 */

lazyLoad.destroy();

/**

 * 3. Update the array of images that will be observed.

 * This method is useful if you need to respond to DOM insertions after fetching

 * data asynchronously.

 */

fetchImagesAndUpdateDOM().then(() => {

    lazyLoad.update();

});

```

## Configuration

```JavaScript

const lazyLoad = lazily({

    selector: '.my-image-class',

    loadClass: 'my-load-class',

    errorClass: 'my-error-class',

    loadCallback: () => console.log('image has been loaded!'),

    errorCallback: () => console.log('something went wrong!'),

    rootId: 'my-root-container-id',

    rootMargin: '100px 100px 100px 100px',

    threshold: 0.5

});

```

### Options:

| Option  | Type  | Default  | Description

| ------- | ----- | -------- | ------------

| `selector`      | String   |`'.js-lazily-image'`| Selector used to retrieve images. Any valid selector that can be passed to `querySelectorAll` can be used.

| `loadClass`     | String   | `'has-loaded'` | Class to be applied to each image once loaded.

| `errorClass`    | String   | `'has-error'` | Class to be applied to each image on error.

| `loadCallback`  | Function | `null` | Callback function to be executed on each image's `load` event.

| `errorCallback` | Function | `null` | Callback function to be executed on each image's `error` event.

| `rootId`      | String   | `null` | `Id` of the `root` container. Defaults to the browser viewport if not specified. (see Intersection Observer API [docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) for details).

| `rootMargin`    | String   | `'0px 0px 0px 0px'` | Margin around the root container. Can have values similar to the CSS margin property. E.g. `"10px 20px 30px 40px"`. If the `rootId` is specified the values can be percentages. (see Intersection Observer API [docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) for details).

| `threshold`     | Number   | `0` | A single number which indicates at what percentage of the images's visibility the observer's callback should be executed. E.g. If you want to detect when visibility passes the 50% mark (half of the image is visible within the root element), you can use a value of `0.5`. (see Intersection Observer API [docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) for details).

## License

Licensed under the MIT License, Copyright © 2019 Reece Lucas.

See [LICENSE](./LICENSE) for more information.