https://github.com/leeoniya/notyet

Lazy image & media loader
https://github.com/leeoniya/notyet

Last synced: 3 months ago
JSON representation

Lazy image & media loader

• Host: GitHub
• URL: https://github.com/leeoniya/notyet
• Owner: leeoniya
• License: mit
• Created: 2019-07-11T01:19:15.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-07-20T11:25:04.000Z (about 3 years ago)
• Last Synced: 2025-04-11T08:30:56.481Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 26.4 KB
• Stars: 14
• Watchers: 2
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## NotYet

Lazy image & media loader _(MIT Licensed)_

---

### Introduction

NotYet is a lazy image & media loader created from Jeremy Wagner's excellent [yall.js](https://github.com/malchata/yall.js), but significantly refactored and exposes a different API.

**Features** (inherited from yall.js)

- Tiny (~1.5k min)

- Can lazy-load images, backgrounds, videos & iframes

- Supports SEO by instantly loading for common bot user-agents

- Requires IntersectionObserver

- Can use MutationObserver to track DOM changes

**Differences**

- No mutation of `classList` or `className` [Issue #59](https://github.com/malchata/yall.js/issues/59)

- Backgrounds are lazy-loaded by setting `.lazy` and `data-bg` instead of `.lazy-bg` (NotYet will set `element.style.backgroundImage` rather than `classList`).

- If IntersectionObserver is absent, falls back to instant loading [Issue #51](https://github.com/malchata/yall.js/issues/51)

- `.lazy` should be set on `` rather than a child `` fallback element. Note that by default `` is an [inline element](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#Elements) which will not vertically expand to the size of its contents; simply set it to something like `picture { display: inline-block }` in your base stylesheet.

- No event binding pass-through (https://github.com/malchata/yall.js#events)

- `willLoad(element)` event

- No use of requestIdleCallback - this use case does not benefit much from it

- Can be isolated to specific container elements

- Fewer configurable options

- Smaller devDeps (13.9 MB vs 35.4 MB)

---

### API

```html

    

    

        

        

    

    

      

      

    

    

    


```

```js

document.addEventListener("DOMContentLoaded", () => {

    notyet({

        target: document.body,

        mutations: true,

        class: "lazy",

        threshold: "200px",

        willLoad: el => {

            console.log(el);

        }

    });

});

```