由于原本的个人主页太丑,于是换了新的,并且准备利用一款JS制作About页,为了能让主页拥有更快的访问速度,于是便分离Home页和About页,先前是等页面完成Load后加载iframe,但为了照顾流量党便采用点击后加载的方式。不懂JS于是踩了很多坑∑( ̄□ ̄)

流程设计

A标签点击 -> 显示Loading.gif并将iframe标签插入指定div中 -> iframe加载完成后跳转指定锚点,隐藏Loading.gif并触发更改A标签使A标签直接指向指定锚点,避免iframe重新加载

Code

<!--我就以主页的about举例吧-->

<!--Loading动画-->
<img id="about-load" src="loading.gif" style="display:nano">
<!--初始的A标签-->
<a href="javascript:about();">About</a>
<!--要插入iframe的div-->
<div id="about-div"></div>

<script>
//初始A标签触发的function
function about() {
//显示Loading动画
document.getElementById("about-load").style.display = "block";
//将iframe插入id为about-div的div中,并加载iframe,完成后触发aboutload的function
document.getElementById("about-div").innerHTML = '<iframe src="about.html" onload="aboutload()"></iframe>'}
</script>

<script>
//iframe加载完成后触发
function aboutload() {
//隐藏Loading动画
document.getElementById("about-load").style.display = "none";
//跳转about锚点
location.href = "#about";
//更换初始A标签,使其直接指向about锚点(突然发现A标签都可以直接跳转锚点,然而我还用js模拟href(=_=))
document.getElementById("about1").innerHTML = '<a href="#about">About</a>';}</script>

至此,点击加载iframe已完成,不需要用到jQuery,省下了部分加载时间。为了弄这个我Google了好久( _ _)ノ,我果然还是菜鸡( ̄▽ ̄~)

说点什么
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...