[英]Lazy Load Iframe Only After Modal is Triggered
Issue: I cannot natively lazy load an iframe on a modal window.问题:我无法在模态 window 上本地延迟加载 iframe。 When I check the waterfall in Inspect element > Network, the iframe loads immediately.
当我在 Inspect element > Network 中检查瀑布时,iframe 会立即加载。
Goal: The iframe should load ONLY when modal is triggered.目标:iframe 应仅在触发模态时加载。 Can you help please?
你能帮忙吗?
I don't use dependencies like jQuery, but javascript is OK if it provides a solution.我不使用 jQuery 之类的依赖项,但是如果 javascript 提供了解决方案,则可以。 I tried the native and several other lazy loading solutions with no success.
我尝试了本机和其他几种延迟加载解决方案,但均未成功。
My code:我的代码:
.modal-state { display: none }.modal-state:checked+.modal { opacity: 1; visibility: visible }.modal-state:checked+.modal.modal__inner { top: 0 }.modal { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: left; background: #f2f2f2; transition: opacity.01s ease; z-index: 7; display: flex; flex-direction: column; height: 100vh; overflow-y: auto }.modal__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer }.modal__inner { transition: top.01s ease; height: max-content; position: relative; max-width: 1200px; width: -webkit-fill-available; margin: auto; padding: 1em 1em; }.modal__close { position: absolute; right: 1.1em; top: 0; /*-.3em*/ width: 1.1em; height: 1.1em; cursor: pointer; z-index: 1 }.modal__close:after, .modal__close:before { content: ''; position: absolute; width: 2px; height: 1.5em; background: #999; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0 }.modal__close:hover:after, .modal__close:hover:before { background: #000 }.modal__close:before { transform: rotate(-45deg) }.container-pay { position: relative; width: 100%; height: 200px; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ }.responsive-iframe-pay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; }
<p>In our <label for="modal-store">merchandize store</label>.</p> <input class="modal-state" id="modal-store" type="checkbox" /> <div class="modal"> <label class="modal__bg" for="modal-store"></label> <div class="modal__inner"><label class="modal__close" for="modal-store"></label> <p> <div class="container-pay"> <iframe loading="lazy" class="responsive-iframe-pay" src="https://store.website.com"></iframe> </div> </p> </div> </div>
iFrames load when they're encountered in the rendered HTML DOM. iFrame 在呈现的 HTML DOM 中遇到时加载。 Since your iFrame exists as part of the initially loaded code, it will load when the parser hits that portion of the HTML.
由于您的 iFrame 作为初始加载代码的一部分存在,因此它将在解析器命中 HTML 的该部分时加载。
You can defeat that initial load action by either adding the iFrame to the DOM or modifying the URL right before the modal window is opened.您可以通过将 iFrame 添加到 DOM 或在打开模态 window 之前修改 URL 来取消初始加载操作。
Modifying the <iframe src="" />
is likely the best solution since it will keep the loaded content for any additional times the modal is displayed.修改
<iframe src="" />
可能是最好的解决方案,因为它将在显示模式的任何其他时间保留加载的内容。
You can do this by adding an "onchange" event to the checkbox which will run the javascript to change the src attribute of the iframe.您可以通过向复选框添加“onchange”事件来执行此操作,该事件将运行 javascript 以更改 iframe 的 src 属性。
Make sure to change the src
on the iframe to an empty string ""
so it doesn't try to load anything right away.确保将 iframe 上的
src
更改为空字符串""
,这样它就不会立即尝试加载任何内容。
var toggle = document.getElementById('modal-store'); var frame = document.getElementById('the-iframe'); var urlTarg = "https://google.com"; // put the page you want to load in the frame in the urlTarg function toggleModal() { if(toggle.checked && frame.src.= urlTarg){ frame;src = urlTarg; } }
.modal-state { display: none }.modal-state:checked+.modal { opacity: 1; visibility: visible }.modal-state:checked+.modal.modal__inner { top: 0 }.modal { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: left; background: #f2f2f2; transition: opacity.01s ease; z-index: 7; display: flex; flex-direction: column; height: 100vh; overflow-y: auto }.modal__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer }.modal__inner { transition: top.01s ease; height: max-content; position: relative; max-width: 1200px; width: -webkit-fill-available; margin: auto; padding: 1em 1em; }.modal__close { position: absolute; right: 1.1em; top: 0; /*-.3em*/ width: 1.1em; height: 1.1em; cursor: pointer; z-index: 1 }.modal__close:after, .modal__close:before { content: ''; position: absolute; width: 2px; height: 1.5em; background: #999; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0 }.modal__close:hover:after, .modal__close:hover:before { background: #000 }.modal__close:before { transform: rotate(-45deg) }.container-pay { position: relative; width: 100%; height: 200px; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ }.responsive-iframe-pay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; }
<p>In our <label for="modal-store">merchandize store</label>.</p> <input class="modal-state" id="modal-store" type="checkbox" onchange="toggleModal" /> <div class="modal"> <label class="modal__bg" for="modal-store"></label> <div class="modal__inner"><label class="modal__close" for="modal-store"></label> <p> <div class="container-pay"> <iframe id="the-iframe" loading="lazy" class="responsive-iframe-pay" src=""></iframe> </div> </p> </div> </div>
You can apply this to multiple iframe targets on the same page or the same site with a few modifications.您可以将其应用于同一页面或同一站点上的多个 iframe 目标,只需进行一些修改。 This assumes that:
这假设:
You would modify the Javascript to something like this:您可以将 Javascript 修改为如下内容:
// you'll pass all the required values to the function
function toggleModal(checkbox, frameTarg, urlTarg) {
var frame = document.getElementById(frameTarg);
if(checkbox.checked && frame.src != urlTarg){
frame.src = urlTarg;
}
}
You will only need the javascript once per parent page since the same function can work for any combo of checkboxes, iframes, and URLs每个父页面只需要一次 javascript,因为相同的 function 可以用于复选框、iframe 和 URL 的任何组合
And the checkbox HTML to: (Note: the same function could be applied to a button, link, etc)并且复选框 HTML 到:(注意:相同的 function 可以应用于按钮、链接等)
<input class="modal-state"
id="modal-store"
type="checkbox"
onchange="toggleModal(this, 'the-iframe', 'https://theurltoloadinframe.com')"
/>
<input class="modal-state2"
id="modal-store"
type="checkbox"
onchange="toggleModal(this, 'iframe2', 'https://someotherurltoload.com')"
/>
Basically, the function expects you to pass in:基本上,function 希望你传入:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.