105 lines
4.2 KiB
JavaScript
105 lines
4.2 KiB
JavaScript
import { IgniteProperty } from "../ignite-html/ignite-html.js";
|
|
import { IgniteTemplate } from "../ignite-html/ignite-template.js";
|
|
|
|
/**
|
|
* The helper class that actually watches element.
|
|
* This uses one global intersection observer that is automatically destroyed
|
|
* when it's finished to speed up lazy loading and reduce overhead.
|
|
*/
|
|
class IgniteLazyLoad {
|
|
static watch(element, callback) {
|
|
//Setup the watching counter if we haven't yet.
|
|
if (!IgniteLazyLoad.watching) {
|
|
IgniteLazyLoad.watching = [];
|
|
}
|
|
|
|
//Setup the observer if we haven't yet.
|
|
if (!IgniteLazyLoad.observer) {
|
|
IgniteLazyLoad.observer = new IntersectionObserver(results => {
|
|
results.forEach(result => {
|
|
if (result.isIntersecting) {
|
|
//Find the watching element
|
|
var index = -1;
|
|
var watching = null;
|
|
for (var i = 0; i < IgniteLazyLoad.watching.length; i++) {
|
|
if (IgniteLazyLoad.watching[i].element == result.target) {
|
|
index = i;
|
|
watching = IgniteLazyLoad.watching[i];
|
|
break;
|
|
}
|
|
}
|
|
|
|
//Invoke the callback
|
|
watching.callback();
|
|
|
|
//Remove the watching entry.
|
|
IgniteLazyLoad.watching.splice(index, 1);
|
|
|
|
//Unobserve this element.
|
|
IgniteLazyLoad.observer.unobserve(result.target);
|
|
}
|
|
});
|
|
|
|
//If we have nothing left to watch, stop watching and cleanup.
|
|
if (IgniteLazyLoad.watching.length == 0) {
|
|
IgniteLazyLoad.observer.disconnect();
|
|
IgniteLazyLoad.observer = null;
|
|
}
|
|
}, { root: null, trackVisibility: true, delay: 1000 });
|
|
}
|
|
|
|
//Add our element to the watching list.
|
|
IgniteLazyLoad.watching.push({ element: element, callback: callback });
|
|
|
|
//Observe this element.
|
|
IgniteLazyLoad.observer.observe(element);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Lazy loads an image in the src attribute for this element.
|
|
* @param {string|Function|IgniteProperty} placeholder The palceholder image to use before the image is loaded. If null, a default one will be used.
|
|
* @param {Function|IgniteProperty} callback The callback function to invoke once the image has been lazy loaded in. By default null.
|
|
* @returns {IgniteTemplate} This ignite template.
|
|
*/
|
|
IgniteTemplate.prototype.lazy = function (placeholder = null, callback = null) {
|
|
//See if we have a src attribute already defined.
|
|
if (this._attributes["src"]) {
|
|
//Save the original source.
|
|
this._lazy_src = this._attributes["src"];
|
|
|
|
//If we have a placeholder set it
|
|
if (placeholder) {
|
|
if (placeholder instanceof IgniteProperty) {
|
|
this._attributes["src"] = placeholder.value;
|
|
} else if (placeholder instanceof Function) {
|
|
this._attributes["src"] = placeholder();
|
|
} else {
|
|
this._attributes["src"] = placeholder;
|
|
}
|
|
} else {
|
|
//Use default transparent empty png if no placeholder.
|
|
this._attributes["src"] = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
|
|
}
|
|
|
|
//Add a constructor to add our element to the lazy load watcher.
|
|
this._constructors.push(() => {
|
|
IgniteLazyLoad.watch(this.element, () => {
|
|
if (this._lazy_src) {
|
|
this._attributes["src"] = this._lazy_src;
|
|
this.element.setAttribute("src", this._lazy_src);
|
|
this._lazy_src = null;
|
|
|
|
//If we have a callback invoke it.
|
|
if (callback instanceof IgniteProperty) {
|
|
callback.value();
|
|
} else if (callback instanceof Function) {
|
|
callback();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
return this;
|
|
}; |