alex/yomichan
1
Fork 0
Code Releases Activity

Defer load of iframe on the settings page (#1313)

Browse Source
This commit is contained in:
toasted-nutbread 2021-01-25 19:21:02 -05:00 committed by GitHub
parent 5215c6b8b4
commit ea1d40f94b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
ext/bg/js/settings2/settings-display-controller.js
View File

@ -54,6 +54,10 @@ class SettingsDisplayController {
node.addEventListener('keydown', onInputTabActionKeyDown, false);
}
for (const node of document.querySelectorAll('.defer-load-iframe')) {
this._setupDeferLoadIframe(node);
}
this._onMoreToggleClickBind = this._onMoreToggleClick.bind(this);
const moreSelectorObserver = new SelectorObserver({
selector: '.more-toggle',
@ -305,4 +309,33 @@ class SettingsDisplayController {
return false;
}
}
_setupDeferLoadIframe(element) {
const parent = this._getMoreContainer(element);
if (parent === null) { return; }
let mutationObserver = null;
const callback = () => {
if (!this._isElementVisible(element)) { return false; }
const src = element.dataset.src;
delete element.dataset.src;
element.src = src;
if (mutationObserver === null) { return true; }
mutationObserver.disconnect();
mutationObserver = null;
return true;
};
if (callback()) { return; }
mutationObserver = new MutationObserver(callback);
mutationObserver.observe(parent, {attributes: true});
}
_isElementVisible(element) {
return (element.offsetParent !== null);
}
}

2
ext/bg/settings2.html
View File

@ -720,7 +720,7 @@
Pitch accents for terms and expressions can be shown if a dictionary supporting pitch accents is installed.
There are currently three different ways that pitch accents can be presented:
</p>
<iframe src="/bg/pitch-accents-preview.html" id="pitch-accents-preview-frame"></iframe>
<iframe data-src="/bg/pitch-accents-preview.html" id="pitch-accents-preview-frame" class="defer-load-iframe" data-parent-distance="1"></iframe>
<p>
<a class="more-toggle" data-parent-distance="3">Less&hellip;</a>
</p>