diff options
| -rw-r--r-- | ext/bg/js/settings2/settings-display-controller.js | 33 | ||||
| -rw-r--r-- | ext/bg/settings2.html | 2 |
2 files changed, 34 insertions, 1 deletions
diff --git a/ext/bg/js/settings2/settings-display-controller.js b/ext/bg/js/settings2/settings-display-controller.js index 6f0a8276..4dee0fab 100644 --- a/ext/bg/js/settings2/settings-display-controller.js +++ b/ext/bg/js/settings2/settings-display-controller.js @@ -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); + } } diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html index 3bad1217..98274277 100644 --- a/ext/bg/settings2.html +++ b/ext/bg/settings2.html @@ -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…</a> </p> |