iframe延迟加载
由于原本的个人主页太丑,于是换了新的,并且准备利用一款 JS 制作 About 页,为了能让主页拥有更快的访问速度,于是便分离 Home 页和 About 页,先前是等页面完成 Load 后加载 iframe,但为了照顾流量党便采用点击后加载的方式。不懂 JS 于是踩了很多坑 ∑( ̄ □  ̄)
流程设计
A 标签点击 -> 显示 Loading.gif 并将 iframe 标签插入指定 div 中 -> iframe 加载完成后跳转指定锚点,隐藏 Loading.gif 并触发更改 A 标签使 A 标签直接指向指定锚点,避免 iframe 重新加载
Code
_31<!--我就以主页的about举例吧-->_31_31<!--Loading动画-->_31<img id="about-load" src="loading.gif" style="display:nano" />_31<!--初始的A标签-->_31<a href="javascript:about();">About</a>_31<!--要插入iframe的div-->_31<div id="about-div"></div>_31_31<script>_31 //初始A标签触发的function_31 function about() {_31 //显示Loading动画_31 document.getElementById("about-load").style.display = "block";_31 //将iframe插入id为about-div的div中,并加载iframe,完成后触发aboutload的function_31 document.getElementById("about-div").innerHTML =_31 '<iframe src="about.html" onload="aboutload()"></iframe>';_31 }_31</script>_31_31<script>_31 //iframe加载完成后触发_31 function aboutload() {_31 //隐藏Loading动画_31 document.getElementById("about-load").style.display = "none";_31 //跳转about锚点_31 location.href = "#about";_31 //更换初始A标签,使其直接指向about锚点(突然发现A标签都可以直接跳转锚点,然而我还用js模拟href(=\_=))_31 document.getElementById("about1").innerHTML = '<a href="#about">About</a>';_31 }_31</script>
至此,点击加载 iframe 已完成,不需要用到 jQuery,省下了部分加载时间。为了弄这个我 Google 了好久( _ _)ノ,我果然还是菜鸡( ̄ ▽  ̄~)
iframe延迟加载
https://blog.ixk.me/post/iframe-lazy-loading许可协议
发布于
2018-06-16
本文作者
Otstar Lin
转载或引用本文时请遵守许可协议,注明出处、不得用于商业用途!