站点图标

iframe延迟加载

2018-06-16折腾记录JavaScript
本文最后更新于 410 天前,文中所描述的信息可能已发生改变

由于原本的个人主页太丑,于是换了新的,并且准备利用一款 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
  • 许可协议

    BY-NC-SA

  • 发布于

    2018-06-16

  • 本文作者

    Otstar Lin

转载或引用本文时请遵守许可协议,注明出处、不得用于商业用途!

Bing每日一图API写在2018年高考前