非本地调用JS代码对页面加载速度影响的解决

Problem:

当页面加入非本地JS广告代码或者统计代码后,如果这一段JS代码不完成调用,JS代码后面的内容就无法显示,从而影响网页浏览速度,而且如果JS代码所在的服务器出现无法连接的情况,会使页面加载卡在某个位置,严重影响用户浏览体验。

Solve:

可以通过在本页面内的DIV和JS配合解决此问题。
思路:首先在要插入JS代码的位置插入一个无JS的空DIV,然后再页尾插入一个display属性为none的div,其内容是要插入的代码。用当前页面内的一段JS代码实现在页尾的DIV中JS调用完成后替换掉无JS的空DIV。

Code:

首先在要插入JS广告代码的地方插入一个DIV(id="ad"):

<div id="ad">Loading AD...Please Wait For a While.</div>

然后在页尾插入一个包含JS广告代码的DIV(id="adcode"):

<div id="adcode" style="display:none">
JS广告代码
</div>

在此DIV后面插入一段JS代码:

<script language="javascript" type="text/javascript">
if(document.getElementById("ad") != null){document.getElementById("ad").innerHTML = document.getElementById("adcode").innerHTML};
</script>

这样在页面载入的时候ad层的位置显示的是Loading AD...Please Wait For a While.,当页面载入完毕,JS代码调用成功,ad层的内容会被adcode层的内容替换掉,显示为非本地JS代码所调用的内容。

Example:

见本页面的侧边栏

关于 离乐乐

上善若水,水善利万物而不争,处众人之所恶,故几于道。
此条目发表在 技术 分类目录,贴了 , 标签。将固定链接加入收藏夹。

非本地调用JS代码对页面加载速度影响的解决》有 4 条评论

  1. FeelingFly 说:

    @Evance:
    是这样的,由于JS放在页面的Footer最后部分(版权信息之下,备案号之上),所以JS是在整个页面Footer以上的部分加载完之后才开始加载的,加载完成以后替换掉Loading……里面的内容。
    所以,如果JS代码无法远程调用的话,不会影响Footer以上的内容加载,不会卡住,只是页面完全加载完以后,Loading……仍然不会被替换。

  2. Evance 说:

    光从效果上来说,好像是做到了没有加载的时候显示"Loading AD...Please Wait For a While."
    事实上,它并没有做到解决:
    "如果JS代码所在的服务器出现无法连接的情况,会使页面加载卡在某个位置"
    这一个问题.
    呵呵.回头给你看一个示例.

  3. Evance 说:

    拜托,这个方法不行的好么.
    原理都有问题

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>