js让iframe延时加载

js让iframe延时加载

As web & mobile developers we often try to deliver the final bundle sizes of these applications. This involves minifying things like HTML, stylesheets, fonts and scripts which helps a lot to deliver fast applications and websites. Tools like Lighthouse can be used to audit websites.

作为Web和移动开发人员，我们经常尝试提供这些应用程序的最终捆绑包大小。 这涉及最小化HTML，样式表，字体和脚本之类的东西，这对快速交付应用程序和网站很有帮助。 像Lighthouse这样的工具可以用来审核网站。

On the other hand images account for a lot of the size of websites. According to HTTP Archive, images can make up to 50% of a total webpage’s weight. For some sites, this number may be even higher. Think of e-commerce platforms like Amazon or eBay and social media platforms like Facebook or Twitter: if you are offering products or letting people share images then images will contribute a lot to the page size and hence loading performance.

另一方面，图片占了网站的很大一部分。 根据HTTP Archive的说法，图像可占整个网页重量的50％。 对于某些站点，此数字可能更高。 想想像Amazon或eBay这样的电子商务平台以及像Facebook或Twitter这样的社交媒体平台：如果您提供产品或让人们共享图像，那么图像将对页面大小做出很大贡献，从而提高了加载性能。

Offers on eBay usually have good looking images to increase sales 在eBay上提供的商品通常具有美观的图片以增加销量

Not all images are equally important. While the website logo at the top of a website should be immediately present on page load, an image at the bottom of the page does not necessarily need to be immediately loaded. Think of the enormous amount of products offered on eBay: should you really need to load images of all deals if you’re only looking at the first 10 suggestions eBay shows you?

并非所有图像都同样重要。 虽然在页面加载时应立即显示网站顶部的网站徽标，但不一定需要立即加载页面底部的图像。 想想eBay提供的大量产品：如果仅查看eBay向您显示的前10条建议，您是否真的需要加载所有交易的图像？

Even if you’re not operating in these image-heavy industries, it is very easy to increase the loading times of your website. We can optimize and compress our scripts and fonts but it’s all for nothing if someone from marketing slaps some high-resolution uncompressed images on your website without asking about the repercussions. There goes your good Lighthouse ranking (if you had one in the first place).

即使您不在图像繁重的行业中工作，也很容易增加网站的加载时间。 我们可以优化和压缩脚本和字体，但是如果营销人员在您的网站上拍了一些高分辨率的未压缩图像而又不问其影响，那一切都将一事无成。 您的灯塔排名很高(如果您排名第一)。

There are multiple ways to reduce the negative impact of images on your website performance:

有多种方法可以减少图像对网站性能的负面影响：

There are services or software libraries which compress images to reduce their size

有些服务或软件库可以压缩图像以减小其大小 You can store the same image in multiple resolutions and deliver an appropriate image depending on factors like network speed or screen size

您可以以多种分辨率存储同一图像，并根据网络速度或屏幕尺寸等因素提供适当的图像 Images and other resources can be cached. This won’t improve initial load times but subsequent loading times will be better as the cached images will be served. Be careful as you might not want to have caching for everything!

可以缓存图像和其他资源。 这不会缩短初始加载时间，但由于将提供缓存的图像，因此后续加载时间会更好。 请小心，因为您可能不想缓存所有内容！ You can use techniques like infinite scroll or virtual scroll. This works best for list or grid based layouts. Since the user needs to scroll further to see more content you’re never rendering more than a couple of images at once. However, these approaches also have down sides (e.g. accessibility concerns) and they can’t be applied for every situation.

您可以使用无限滚动或虚拟滚动之类的技术。 这最适合基于列表或网格的布局。 由于用户需要进一步滚动才能看到更多内容，因此您一次渲染的图像绝不会超过几个。 但是，这些方法也有不利的一面(例如，可访问性问题)，不能将其应用于每种情况。 You can tell the browser to only load images when the user is about see them. Example: if the user visits your website and never scrolls down to the end of the page then the images at the end of your website will never be loaded!

您可以告诉浏览器仅在用户即将看到图像时才加载它们。 例如：如果用户访问您的网站并且从不向下滚动到页面末尾，则将永远不会加载网站末尾的图像！

Let’s take a closer look at the last suggestion mentioned above and how we can apply this to reduce the loading times of a website.

让我们仔细看看上面提到的最后一个建议，以及如何应用它来减少网站的加载时间。

好吧，解决起来不是那么困难，不是吗？ (Well, it can’t be that hard to solve, can it?)

There have been multiple proposed solutions for lazy loading of images. If you briefly think about it, the problem might seem rather easy to solve at first:

对于图像的延迟加载，已经提出了多种解决方案。 如果您简短地考虑一下，那么问题一开始似乎很容易解决：

Resources like images are downloaded automatically by the browser if there is a src attribute. Therefore, a custom HTML attribute (e.g. data-src) whose value is the URL is set on the element. Instead of specifying a

如果有src属性，则图像等资源会由浏览器自动下载。 因此，在元素上设置了一个自定义HTML属性(例如data-src )，其值为URL。 而不是指定一个

Add an event listener to listen for scroll events.

添加事件侦听器以侦听滚动事件。

If the user is about to reach the image by scrolling: set the src attribute of the HTML element using the custom HTML attribute which lets the browser know that it should request the image

如果用户要通过滚动到达图像：使用自定义HTML属性设置HTML元素的src属性，该属性使浏览器知道它应该请求图像

However, some drawbacks can be immediately noticed. Without debouncing the scroll event listening, the function will be triggered a lot of times which can lead to worse performance. Of course, there are some open-source libraries like vanilla-lazyload which promise to make this work in all browsers with ease.

但是，有些缺点可以立即发现。 在不消除滚动事件监听的情况下，该函数将被多次触发，这可能导致性能下降。 当然，有些开放源代码库(例如vanilla-lazyload)保证可以轻松地在所有浏览器中实现此功能。

Recently, modern browser started to support an easy to use and backwards-compatible solution which I find quite interesting.

最近，现代浏览器开始支持易于使用且向后兼容的解决方案，我觉得这很有趣。

仅使用一个HTML属性如何延迟加载图像 (How do lazy loading of images with just one HTML attribute)

There’s a loading HTML attribute. By setting loading="lazy" the image will only be downloaded if the user scrolls near it. It does not get any easier than that. If the image is instantly visible (e.g. because it’s in the top navigation bar) the image will still be shown as usual.

有一个正在loading HTML属性。 通过设置loading="lazy" ，仅当用户滚动图像时才下载图像。 没有比这更容易的了。 如果图像立即可见(例如，因为它位于顶部导航栏中)，则图像仍将照常显示。

Take a look at the following example. I used the Chrome Developer Tools for you to be able to see the difference. Without lazy loading, all images would have been requested when loading the page. But with lazy loading, we’re only loading the images we can actually see. Only if we scroll further down near the end of the page the images at the bottom are requested.

看下面的例子。 我使用了Chrome开发者工具，以了解它们之间的区别。 如果没有延迟加载，则在加载页面时会请求所有图像。 但是在延迟加载的情况下，我们仅加载实际上可以看到的图像。 仅当我们在页面末尾附近进一步向下滚动时，才要求提供底部的图像。

Left: initial page load. Right: scrolling down to the end of the page. 左：初始页面加载。 右：向下滚动到页面末尾。

Currently, this approach will not work for every browser out there (looking at you, IE11). However, fairly recent versions of Chrome, Firefox and the Chromium-based Edge are already supporting it. This is the idea of progressive enhancement: users with modern web browsers are benefiting from this feature while the website still works for browsers which do not support it yet.

目前，这种方法并不适用于所有浏览器(IE11)。 但是，相当新的Chrome，Firefox和基于Chromium的Edge版本已经支持它。 这就是逐步增强的想法：使用现代Web浏览器的用户将从该功能中受益，而该网站仍可用于尚不支持该功能的浏览器。

To support as many browsers as possible you could also use a third-party solution for browsers that do not support native lazy loading yet.

为了支持尽可能多的浏览器，您还可以对尚不支持本机延迟加载的浏览器使用第三方解决方案。

if(!('loading' in HTMLImageElement.prototype)) { // apply fallback solution for older browsers}

Pro tip: It makes sense to provide width and height for lazy loaded elements. Even if you don’t know the exact sizes it is a good idea to provide at least some min-height and min-width to avoid big layout shifts while the images are being loaded. The Chrome Developer Tools or Firefox DevTools allow you to simulate slower networking speed which can help you to test your website with less than ideal conditions.

专家提示：为延迟加载的元素提供width和height是有意义的。 即使您不知道确切的大小，也要至少提供一些min-height和min-width以避免在加载图像时出现较大的版式偏移。 Chrome开发人员工具或Firefox DevTools可让您模拟较慢的网络速度，这可以帮助您在不太理想的条件下测试网站。

如何延迟加载iframe (How to do lazy loading of iframes)

Aside from images, many websites use iframe to embed an external website on your website. For example, a Twitter feed or your office location on Google Maps can easily be embedded on any site using an iframe. You’re essentially loading a website within your website.

除了图片之外，许多网站还使用iframe在您的网站上嵌入外部网站。 例如，可以使用iframe将Twitter feed或您在Google Maps上的办公室位置轻松嵌入任何站点。 您实际上是在网站内加载网站。

Native lazy-loading of iframes defers offscreen iframes from being loaded until the user scrolls near them. This saves data, speeds up the loading of other parts of the page, and reduces memory usage.

iframe的本机延迟加载会延迟屏幕外iframe的加载，直到用户在其附近滚动为止。 这样可以节省数据，加快页面其他部分的加载速度，并减少内存使用量。

<iframe src="https://example.com" loading="lazy" width="600" height="400"></iframe>

结论 (Conclusion)

Thanks for reading this short post. As you can see, modern browsers allow to lazy load images and iframes without any noticeable downsides. It is up to the developer to decide whether a specific image or iframe should be lazy loaded. How do you do lazy loading in your websites? Let me know in the comments.

感谢您阅读这篇简短的文章。 如您所见，现代浏览器允许延迟加载图像和iframe，而没有任何明显的缺点。 由开发人员决定是否应延迟加载特定图像或iframe。 您如何在网站中进行延迟加载？ 在评论中让我知道。

翻译自: https://itnext.io/how-to-use-native-image-and-iframe-lazy-loading-in-website-2109d577f7b1

js让iframe延时加载

相关资源：iframe延时加载