HTML延迟加载

IFRAME是HTML标签，在当前 HTML 文档中嵌入另一个文档。有关详情请查阅文档，这里我们先了解关于在浏览器中的延迟加载（懒加载）特性。关于HTML标签HTML内联框架元素能够将另一个HTML页面嵌入到当前页面中。每个都拥有完整的文档环境。理论上来说你能够在代码中写出来无限多的，但最好还是先看看这么做会不会导致某些性能问题同时对于搜索引擎优化（SEO）的影响。延迟加载（懒加载）应用场景提升页面加载速度，节约用户带宽，在用户尚未到达的资源的情况下暂不加载，即将到达时再将其加载出来。如上篇文章“图片属性loading="lazy"延迟请求加载资源”属性一样。也就是说，loading属性不仅仅在标签使用，同时也可以在标签上使用。使用方法

HTML元素延迟加载属性 —— loading属性值lazy允许浏览器选择性加载IMG元素，根据用户滚动操作至其元素附近执行加载，一定程度起到节流的作用。 在chrome 76以后的版本中，出现了一种loading="azy"的属性，这个属性让img实现懒加载效果： 但是这个属性的真是表现可能和我们想的还不太一样。 img属于要设置宽/高 因为懒加载的原理就是利用图片的高度和视区的高度进行计算，如果图片没有设置高度，那么就是0，那么无论放多少个图片，都视为在视区范围内，会立马加载。 设置宽高属性方法1 设置宽高属性方法2 其他 1.loading="eager"是loading="lazy"的相反操作，意思就是不懒加载，直接去加载。 2.如何判断浏览器是否支持loading="lazy"属性： var isSupportLoading = 'loading' in HTMLImageElement.prototype; 3.目前loading="lazy"只有chrome 76+才支持，适合外贸网站。 4.此属性也可以应用在标签上。阅读“iframe懒加载”