lazy load iframe (delay src http call) with jquery

后端未结

关注

 6  2331

有刺的猬 2020-12-05 05:13

I am looking for something similar to jQuery image lazy load plugin, but for iframes.

6条回答

日久生厌 (楼主)

2020-12-05 06:06

</strong></p> <p>When implemented, this feature will allow lazy loading when the <code>iframe</code> enters the viewport without any JavaScript!</p> <p>There is also an analogous feature for images: How do you make images load lazily only when they are in the viewport?</p> <p>For <code>iframes</code>, I'm not sure what is the status, but it does seem like there is an intention to enable it as well:</p> <ul> <li>caniuse says available: https://caniuse.com/#feat=loading-lazy-attr</li> <li>https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element does not mention <code>loading</code> currently, while https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element does</li> <li>MDN marks it as experimental: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe</li> </ul> <p>To observe this in action, open the "Network" tab of your developer tools before running the snippet below. If your browser implements the feature, you can clearly see new network requests as you scroll down to the next iframe!</p> <p>Test outcomes:</p> <ul> <li>Chromium 81: works, loads on hover</li> <li>Firefox 77: fails, loads all at once</li> </ul> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('load-now').addEventListener('click', function(){ for (const img of document.getElementsByTagName('iframe')) { img.loading = 'eager'; } });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.separator { height: 1000px; width: 100px; border: 5px solid red; } img { height: 340px; border: 5px solid black; } #load-now { border: 5px solid black; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="load-now">Click me to load all images now!</div> <div><iframe loading="lazy" height="340" src="https://en.wikipedia.org/wiki/Donald_Trump">