<lazy-image> is a custom element that contains an image that has the
option to be loaded only on-demand, for performance reasons. If a <lazy-image>
is inactive, then its source is not loaded (the XHR won't be made until the
active attribute is set on the element). See the
code on GitHub.
<lazy-image> has the following attributes:
active, whether the image should be loaded or notalt, the alternate text for the image the image source (like you would use with a <img>)src, the image source (like you would use with a <img>)srcset, the image source (like you would use with a <img>)active property set to true.
In the example below, the images will only load when clicked (you can check the network tab in
your favourite developer tools to see that there's no initial request for these files).
This happens because they each start off with the active property set to false,
and have a click event listener, that
sets it to true:
<lazy-image src="..." alt="..." id="i"></lazy-image>
<lazy-image alt="..." srcset="... 1x, ... 2x"></lazy-image>
<script>
i.addEventListener('click', function() {
if (!this.active)
this.active = true;
});
</script>
(Click on an image to load it)
<lazy-image>
on the page (i.e. activates or deactivates all of them), you can set the
window.LazyImageSiteDefaultActive global before loading the
lazy-image.js script.
<lazy-image>, this lets you only load
images that are scrolled into view, while leaving images at the bottom
of the page that haven't been seen inactive.
// Create an observer.
var observer = new IntersectionObserver(onChange, {
threshold: [0.5] // rootMargin: '50% 0%'
});
// That observes all the random images we've created.
els.forEach(el => observer.observe(el));
// Whenever we scroll...
function onChange(changes) {
changes.forEach(change => {
var el = change.target;
if (!el.active)
el.active = true;
observer.unobserve(el); // Don't care anymore.
});
}