https://github.com/onyazuka/haniwa-lazy-load

Fast and customizable lazy loading for images and iframes with vanilla js
https://github.com/onyazuka/haniwa-lazy-load

fast image images javascript js lazy load loading vanilla

Last synced: 10 days ago
JSON representation

Fast and customizable lazy loading for images and iframes with vanilla js

• Host: GitHub
• URL: https://github.com/onyazuka/haniwa-lazy-load
• Owner: onyazuka
• License: mit
• Created: 2019-10-11T19:23:59.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-02-25T13:13:10.000Z (almost 5 years ago)
• Last Synced: 2024-12-13T14:40:10.118Z (23 days ago)
• Topics: fast, image, images, javascript, js, lazy, load, loading, vanilla
• Language: JavaScript
• Size: 20.5 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# haniwa-lazy-load

Fast and customizable lazy loader for images and iframes with vanilla js

## Features

- Lazy loading of images and iframes;

- Custom selectors for elements that should be lazy loaded;

- You can specify src attribute of lazy elements;

- Loading process customization/visualization;

- Error handling/visualization;

- You can disable lazy loading without any pain and changing HTML;

## installation

npm i haniwa-lazy-load

## Usage example

For basic usage, look example directory.

You can always detach lazy loading with:

```javascript

lazyLoader.detach();

``` 

and attach it later with:

```javascript

lazyLoader.attach();

```

If you load your images dynamically, you can always add new elements to be lazy loaded:

```javascript

lazyLoader.updateWithSelectors(["img[data-src]", "iframe"]);

lazyLoader.lazyLoad();

```

## LazyLoader Options

- selectors[array][required] - selectors for elements that should be lazy loaded(example: ["img", "iframe"]);

- loadHandler[func][not required] - function (element) => function;

      called before an element starts loading, should return a function that will be called when the element will be completely loaded;

      accepts the element itself;

      you can build default loadHandler with LazyLoader.buildDefaultLoadHandler, that accept two arguments: selector for loading container and selector for loading inner;

- errorHandler[func][not required] - function(element) => void;

      does something with the element on a loading error;

- advance[number][not required][default = 50] - pixels before an image starts loading;

- setNaturalSizeAfterLoad[bool][not required][default = true] - if true, will set real image size after it will have loaded;

- lazyAttribute[string][not required][default = 'data-src'] - attribute in which real 'src' is stored. When content is loaded, 'src' value will be filled from this attribute's value.

## UnlazyLoader Options

- selectors[array][required];

- setNaturalSizeAfterLoad[bool][not required][default = true];

- lazyAttribute[string][not required][default = 'data-src']

## Licension

MIT