Lazy image & media loader (MIT Licensed)
NotYet is a lazy image & media loader created from Jeremy Wagner's excellent yall.js, but significantly refactored and exposes a different API.
Features (inherited from yall.js)
Differences
classList or className Issue #59.lazy and data-bg instead of .lazy-bg (NotYet will set element.style.backgroundImage rather than classList)..lazy should be set on <picture> rather than a child <img> fallback element. Note that by default <picture> is an inline element 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.willLoad(element) event<body>
<img class="lazy" src="https://github.com/leeoniya/notyet/raw/master/placeholder.jpg" data-src="https://github.com/leeoniya/notyet/raw/master/1x.jpg" data-srcset="2x.jpg 2x, 1x.jpg 1x">
<picture class="lazy">
<source data-srcset="2x.webp 2x, 1x.webp 1x" type="image/webp">
<img src="https://github.com/leeoniya/notyet/raw/master/placeholder.jpg" data-src="https://github.com/leeoniya/notyet/raw/master/1x.jpg" data-srcset="2x.jpg 2x, 1x.jpg 1x">
</picture>
<video class="lazy" data-poster="placeholder.jpg" controls preload="none">
<source src="https://github.com/leeoniya/notyet/raw/master/video.webm" type="video/webm">
<source src="https://github.com/leeoniya/notyet/raw/master/video.mp4" type="video/mp4">
</video>
<iframe class="lazy" data-src="https://github.com/leeoniya/notyet/raw/master/iframe.html"></iframe>
<div class="lazy" data-bg="background.jpg"></div>
</body>document.addEventListener("DOMContentLoaded", () => {
notyet({
target: document.body,
mutations: true,
class: "lazy",
threshold: "200px",
willLoad: el => {
console.log(el);
}
});
});