MontoyaTech/ignite-html-lazyload
MontoyaTech/ignite-html-lazyload
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed a potential issue within the lazy loading code. Lazy loading now happens even if there is no src attribute.

Browse Source
This commit is contained in:
MattMo 2021-12-13 18:58:20 -08:00
parent 0a41730792
commit 7eb6f9f9d9
1 changed files with 10 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
ignite-html-lazyload.js
View File

@ -18,24 +18,16 @@ class IgniteLazyLoad {
IgniteLazyLoad.observer = new IntersectionObserver(results => { IgniteLazyLoad.observer = new IntersectionObserver(results => {
results.forEach(result => { results.forEach(result => {
if (result.isIntersecting) { if (result.isIntersecting) {
//Find the watching element //Find the watching element.
var index = -1;
var watching = null;
for (var i = 0; i < IgniteLazyLoad.watching.length; i++) { for (var i = 0; i < IgniteLazyLoad.watching.length; i++) {
if (IgniteLazyLoad.watching[i].element == result.target) { if (IgniteLazyLoad.watching[i].element == result.target) {
index = i; IgniteLazyLoad.watching[i].callback();
watching = IgniteLazyLoad.watching[i]; IgniteLazyLoad.watching.splice(i, 1);
break; break;
} }
} }
//Invoke the callback //Unobserve this element regardless if we were watching it or not.
watching.callback();
//Remove the watching entry.
IgniteLazyLoad.watching.splice(index, 1);
//Unobserve this element.
IgniteLazyLoad.observer.unobserve(result.target); IgniteLazyLoad.observer.unobserve(result.target);
} }
}); });
@ -63,11 +55,14 @@ class IgniteLazyLoad {
* @returns {IgniteTemplate} This ignite template. * @returns {IgniteTemplate} This ignite template.
*/ */
IgniteTemplate.prototype.lazy = function(placeholder = null, callback = null) { 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. //Save the original source.
this._lazy_src = this._attributes["src"]; this._lazy_src = this._attributes["src"];
//If lazy src is invalid, use a transparent placeholder.
if (!this._lazy_src) {
this._lazy_src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
}
//Override the attribute changed function, if someone tries to set src and our lazy_src is set, override that. //Override the attribute changed function, if someone tries to set src and our lazy_src is set, override that.
//Otherwise we might show the wrong lazy loaded image. //Otherwise we might show the wrong lazy loaded image.
var originalAttributeChanged = this.onAttributeChanged; var originalAttributeChanged = this.onAttributeChanged;
@ -102,7 +97,7 @@ class IgniteLazyLoad {
this._attributes["src"] = this._lazy_src; this._attributes["src"] = this._lazy_src;
this.element.setAttribute("src", this._lazy_src); this.element.setAttribute("src", this._lazy_src);
this._lazy_src = null; this._lazy_src = null;
//If we have a callback invoke it. //If we have a callback invoke it.
if (callback instanceof IgniteProperty) { if (callback instanceof IgniteProperty) {
callback.value(); callback.value();
@ -112,7 +107,6 @@ class IgniteLazyLoad {
} }
}); });
}); });
}
return this; return this;
} }