iframe懒加载_延迟加载IFRAME

关于HTML标签

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

延迟加载IFRAME

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

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

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

使用方法

示例代码

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

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

延迟加载IFRAME

.wrap{

width: 640px;

height: 400px;

border: 1px black solid;

margin: 1em auto;

text-align: center;

overflow: scroll;

}

.wrap iframe{width: 100%;}

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
异步加载iframe是一种在页面加载过程中,通过延迟加载iframe内容的方法,以提高页面性能和用户体验。一种常见的异步加载iframe的方法是使用JavaScript的setTimeout()函数来延时加载iframe的内容。在代码中,我们可以使用setTimeout()函数来延迟执行设置iframe的src属性的函数,以便在页面加载完成后再加载iframe的内容。这种方法可以避免阻塞主页面的加载,并提高页面加载速度。另外,还有一种友好iframe(friendly iframe)技术,它也是一种无阻塞加载的方法,不过它可能不算是iframe加载的技术,但是必须使用iframe。 下面是一个示例代码,演示了如何使用setTimeout()函数来实现异步加载iframe: <iframe id="iframe1" src="" width="200" height="100" border="2"></iframe> <script> function setIframeSrc() { var s = "path/to/file"; var iframe1 = document.getElementById('iframe1'); if (-1 == navigator.userAgent.indexOf("MSIE")) { iframe1.src = s; } else { iframe1.location = s; } } setTimeout(setIframeSrc, 5); </script> 在这个示例中,我们使用了setTimeout()函数将setIframeSrc函数延迟执行了5毫秒,以便在页面加载完成后再加载iframe的内容。当setTimeout()函数执行后,setIframeSrc函数会根据浏览器类型设置iframe的src属性或location属性来加载指定的文件。这样就实现了异步加载iframe的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [iframe异步加载技术及性能](https://blog.csdn.net/shadow_zed/article/details/86682331)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值