js让iframe延时加载_延迟加载IFRAME

js让iframe延时加载

We've known for a decade that lazy loading resources like JavaScript, CSS, and especially images is a massive performance win for web pages. At first we used tricks and JavaScript to do the lazy loading, but more recently native image lazy loading has debuted in browsers.

十年来我们已经知道，懒惰地加载诸如JavaScript，CSS，尤其是图像之类的资源是网页的巨大性能胜利。 最初，我们使用技巧和JavaScript进行延迟加载，但是最近， 本机图像延迟加载已在浏览器中首次亮相。

Did you know that you can also lazy load IFRAMEs using the same loading="lazy" attribute and value?

您是否知道也可以使用相同的loading="lazy"属性和值来延迟加载IFRAME？

<iframe 
    src="https://davidwalsh.name/"
    loading="lazy"
    onload="alert('Loaded!');"
/>

You can see how lazy loading IFRAMEs works with this demo:

您可以看到此演示如何延迟加载IFRAME：

See the Pen IFRAME Lazy Load by David Walsh (@darkwing) on CodePen.

见笔IFRAME延迟加载由大卫·沃尔什( @darkwing )上CodePen 。

This single attribute to perform a complex but useful operation is the ideal solution for lazy loading just about anything. I'm so thankful that browsers are implementing APIs that make using best practices so easy!

用于执行复杂但有用的操作的单个属性是延迟加载几乎所有内容的理想解决方案。 非常感谢浏览器实现了API，使使用最佳实践变得如此容易！

翻译自: https://davidwalsh.name/lazy-load-iframes

js让iframe延时加载