|
@@ -23,6 +23,7 @@
|
|
|
this.lazyLoader = this.lazyLoader || (() => {
|
|
this.lazyLoader = this.lazyLoader || (() => {
|
|
|
|
|
|
|
|
const LAZY_LOADING_TIMEOUT = 1000;
|
|
const LAZY_LOADING_TIMEOUT = 1000;
|
|
|
|
|
+ const IDLE_LAZY_LOADING_TIMEOUT = 3000;
|
|
|
const MAX_LAZY_LOADING_TIMEOUT = 30000;
|
|
const MAX_LAZY_LOADING_TIMEOUT = 30000;
|
|
|
|
|
|
|
|
return { process };
|
|
return { process };
|
|
@@ -32,27 +33,37 @@ this.lazyLoader = this.lazyLoader || (() => {
|
|
|
const scriptBeforeElement = document.createElement("script");
|
|
const scriptBeforeElement = document.createElement("script");
|
|
|
scriptBeforeElement.src = scriptURL;
|
|
scriptBeforeElement.src = scriptURL;
|
|
|
document.body.appendChild(scriptBeforeElement);
|
|
document.body.appendChild(scriptBeforeElement);
|
|
|
- let timeoutId, maxTimeoutId;
|
|
|
|
|
|
|
+ let timeoutId, maxTimeoutId, idleTimeoutId;
|
|
|
const promise = new Promise(resolve => {
|
|
const promise = new Promise(resolve => {
|
|
|
|
|
+ let srcAttributeChanged;
|
|
|
scriptBeforeElement.onload = () => scriptBeforeElement.remove();
|
|
scriptBeforeElement.onload = () => scriptBeforeElement.remove();
|
|
|
- const observer = new MutationObserver(() => timeoutId = deferLazyLoadEnd(timeoutId, maxTimeoutId, observer, resolve));
|
|
|
|
|
|
|
+ const observer = new MutationObserver(() => {
|
|
|
|
|
+ srcAttributeChanged = true;
|
|
|
|
|
+ timeoutId = deferLazyLoadEnd(timeoutId, maxTimeoutId, idleTimeoutId, observer, resolve);
|
|
|
|
|
+ });
|
|
|
observer.observe(document, { attributeFilter: ["src", "srcset"], subtree: true });
|
|
observer.observe(document, { attributeFilter: ["src", "srcset"], subtree: true });
|
|
|
- timeoutId = deferLazyLoadEnd(timeoutId, maxTimeoutId, observer, resolve);
|
|
|
|
|
|
|
+ idleTimeoutId = timeout.set(() => {
|
|
|
|
|
+ if (!srcAttributeChanged) {
|
|
|
|
|
+ timeout.clear(timeoutId);
|
|
|
|
|
+ lazyLoadEnd(maxTimeoutId, idleTimeoutId, observer, resolve);
|
|
|
|
|
+ }
|
|
|
|
|
+ }, IDLE_LAZY_LOADING_TIMEOUT);
|
|
|
maxTimeoutId = timeout.set(() => {
|
|
maxTimeoutId = timeout.set(() => {
|
|
|
timeout.clear(timeoutId);
|
|
timeout.clear(timeoutId);
|
|
|
- lazyLoadEnd(maxTimeoutId, observer, resolve);
|
|
|
|
|
|
|
+ lazyLoadEnd(maxTimeoutId, idleTimeoutId, observer, resolve);
|
|
|
}, MAX_LAZY_LOADING_TIMEOUT);
|
|
}, MAX_LAZY_LOADING_TIMEOUT);
|
|
|
});
|
|
});
|
|
|
return promise;
|
|
return promise;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function deferLazyLoadEnd(timeoutId, maxTimeoutId, observer, resolve) {
|
|
|
|
|
|
|
+ function deferLazyLoadEnd(timeoutId, maxTimeoutId, idleTimeoutId, observer, resolve) {
|
|
|
timeout.clear(timeoutId);
|
|
timeout.clear(timeoutId);
|
|
|
- return timeout.set(() => lazyLoadEnd(maxTimeoutId, observer, resolve), LAZY_LOADING_TIMEOUT);
|
|
|
|
|
|
|
+ return timeout.set(() => lazyLoadEnd(maxTimeoutId, idleTimeoutId, observer, resolve), LAZY_LOADING_TIMEOUT);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function lazyLoadEnd(maxTimeoutId, observer, resolve) {
|
|
|
|
|
|
|
+ function lazyLoadEnd(maxTimeoutId, idleTimeoutId, observer, resolve) {
|
|
|
timeout.clear(maxTimeoutId);
|
|
timeout.clear(maxTimeoutId);
|
|
|
|
|
+ timeout.clear(idleTimeoutId);
|
|
|
timeout.set(resolve, LAZY_LOADING_TIMEOUT);
|
|
timeout.set(resolve, LAZY_LOADING_TIMEOUT);
|
|
|
const scriptURL = browser.runtime.getURL("lib/lazy/web-lazy-loader-after.js");
|
|
const scriptURL = browser.runtime.getURL("lib/lazy/web-lazy-loader-after.js");
|
|
|
const scriptAfterElement = document.createElement("script");
|
|
const scriptAfterElement = document.createElement("script");
|