👻 DeathGhost

延迟加载IFRAME

这篇文章发布于

DeathGhost 编辑, 归类于HTML » 当前评论0条。

IFRAME是HTML标签,在当前 HTML 文档中嵌入另一个文档。有关<iframe>详情请查阅文档,这里我们先了解关于<iframe>在浏览器中的延迟加载(懒加载)特性。

关于HTML<iframe>标签

HTML内联框架元素<iframe>能够将另一个HTML页面嵌入到当前页面中。每个<iframe>都拥有完整的文档环境。理论上来说你能够在代码中写出来无限多的<iframe>,但最好还是先看看这么做会不会导致某些性能问题同时对于搜索引擎优化(SEO)的影响。

<iframe src="http://www.deathghost.cn"></iframe>
延迟加载IFRAME
延迟加载IFRAME

延迟加载(懒加载)应用场景

提升页面加载速度,节约用户带宽,在用户尚未到达的资源的情况下暂不加载,即将到达时再将其加载出来。如上篇文章“浏览器图片属性loading="lazy"延迟请求加载资源”属性一样。

也就是说,loading属性不仅仅在<img>标签使用,同时也可以在<iframe>标签上使用。

使用方法

<iframe src="http://www.deathghost.cn" loading="lazy" onload="alert('iframe lazy...');"></iframe>

示例代码

创建一个盒子模拟当前窗口,设置高度,通过换行将其iframe标签置于高度外,添加loading属性为lazy,对其绑定一个加载事件以便测试效果。

当滚动条将至<iframe>标签时开始加载。

<section class="wrap">
	<h1>延迟加载IFRAME</h1>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<iframe src="http://www.deathghost.cn" loading="lazy" onload="alert('iframe lazy...');"></iframe>
</section>
.wrap{
	width: 640px;
	height: 400px;
	border: 1px black solid;
	margin: 1em auto;
	text-align: center;
	overflow: scroll;
}
.wrap iframe{width: 100%;}

总之还是比较好的一种解决方案,浏览器实现此接口,避免使用JavaScript去处理;具体大家根据实际场景按需引用。

在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

当前共获取0条评论。

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕