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

Lazy load now overrides the on attribute changed function and checks to see if src is being set, if it is and we have a pending lazy load it will update the lazy load so that the correct image is loaded.

Browse Source
This commit is contained in:
Matt Mo 2021-11-11 12:00:53 -08:00
parent 64d0a9bec6
commit 0a41730792
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ignite-html-lazyload.js
View File

@ -8,7 +8,7 @@ import { IgniteTemplate } from "../ignite-html/ignite-template.js";
*/ */
class IgniteLazyLoad { class IgniteLazyLoad {
static watch(element, callback) { static watch(element, callback) {
//Setup the watching counter if we haven't yet. //Setup the watching list if we haven't yet.
if (!IgniteLazyLoad.watching) { if (!IgniteLazyLoad.watching) {
IgniteLazyLoad.watching = []; IgniteLazyLoad.watching = [];
} }
@ -68,6 +68,19 @@ class IgniteLazyLoad {
//Save the original source. //Save the original source.
this._lazy_src = this._attributes["src"]; this._lazy_src = this._attributes["src"];
//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.
var originalAttributeChanged = this.onAttributeChanged;
this.onAttributeChanged = (name, newValue) => {
if (name == "src" && this._lazy_src) {
//Update the lazy src
this._lazy_src = newValue;
} else {
//Call the original function.
originalAttributeChanged.call(this, name, newValue);
}
};
//If we have a placeholder set it //If we have a placeholder set it
if (placeholder) { if (placeholder) {
if (placeholder instanceof IgniteProperty) { if (placeholder instanceof IgniteProperty) {