利用JS延迟加载百度分享代码,提高网页速度

发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式。因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮。

其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示。
这里分享下我的放置方式。
一、copy百度分享代码,如下:


代码如下:

<!-- Baidu Button BEGIN -->
<div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare">
<a class="bds_tsina"></a>
<a class="bds_qzone"></a>
<a class="bds_tqq"></a>
<a class="bds_renren"></a>
<a class="bds_douban"></a>
<span class="bds_more"></span>
<a class="shareCount"></a>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools&uid=0" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>
<!-- Baidu Button END -->

二、放置代码
认真分析上面的分享代码,我们可以发现,其中有3个js脚本标签,这些都是有可能影响网页呈现速度的,最后发现,其实,只有最后一个<script>标签的作用是请求百度服务器,展示分享图片和链接。那么,这条JS我们大可放到最后加载。
下面是我做的一个demo:


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>JS延迟加载百度分享代码,提高网页速度</title>
        <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
        <style type="text/css">
            body{margin:0px;padding:0px;font-size:12px;}
            #copyright{clear:both;}
        </style>
    </head>

<body>
        <div id="baidu-share">
            <!-- Baidu Button BEGIN -->
            <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare">
            <a class="bds_tsina"></a>
            <a class="bds_qzone"></a>
            <a class="bds_tqq"></a>
            <a class="bds_renren"></a>
            <a class="bds_douban"></a>
            <span class="bds_more"></span>
            <a class="shareCount"></a>
            </div>
            <script type="text/javascript" id="bdshare_js" data="type=tools&uid=0" ></script>
            <script type="text/javascript" id="bdshell_js"></script>
            <!-- Baidu Button END -->
        </div>
        <div id="copyright">
            <a href="http://codejia.net">编程图书PDF下载【codejia.net】</a>
        </div>

<script type="text/javascript">
            window.onload = shareCode;

function shareCode(){
                document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
            }
        </script>
    </body>
</html>

分析:通过上面的demo,可以发现我只是单纯的将最后一个有src属性的script标签,放到最后动态加载的,并且是在window.onload之后加载。之前加载的都是纯html标签代码,并不会有多影响网页速度。
百度分享代码通过这样调整后就算百度的服务器挂了,也不会影响自己的网页正常显示。

其实,这样的技巧还有很多地方都可以用。想网站统计代码、百度谷歌搜索代码、第三方广告代码等,我们都可以放到网页底部最后来加载,这样即使第三方的服务器宕机,我们自己的机器也不会受到多少影响。

(0)

相关推荐

  • 几种延迟加载JS代码的方法加快网页的访问速度

    本文介绍了如何延迟javascript代码的加载,加快网页的访问速度. 当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点: 1.延迟加载js代码 复制代码 代码如下: <script type="text/javascript" src="" id="my"></script> <script type="text/

  • JS延迟加载(setTimeout) JS最后加载

    第一 JS延迟加载 复制代码 代码如下: <script language="JavaScript" src="" id="my"></script> <script> setTimeout("document.getElementById('my').src='include/common.php'; ",3000);//延时3秒 </script> 一般情况下都是利用setT

  • js图片延迟加载的实现方法及思路

    大概的实现方式是:在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的src值放入到一个新建的_src属性中,把src设置为指定的显示图片.然后,在document.body的scroll事件触发时,循环计算imgs中的img元素位置是否正好在浏览器显示框范围内,如果是,则将img元素的_src属性的值赋给src,这样图片就能显示出来.这里比较麻烦地方是,如何计算img的位置,获得元素的相对于页面的绝对位置.通常是用offsetLeft和offsetTo

  • js 延迟加载 改变JS的位置加快网页加载速度

    当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点: 1.延迟加载js代码 复制代码 代码如下: <script type="text/javascript" src="" id="my"></script> <script type="text/javascript"> setTimeout(&quo

  • js实现延迟加载的几种方法

    js的延迟加载有助与提高页面的加载速度,以下是延迟加载的几种方法: 1.使用setTimeout延迟方法的加载时间 延迟加载js代码,给网页加载留出更多时间 <script type="text/javascript" > function A(){ $.post("/lord/login",{name:username,pwd:password},function(){ alert("Hello"); }); } $(functio

  • JS延迟加载加快页面打开速度示例代码

    第一,JS延迟加载 代码如下: 复制代码 代码如下: <script language="JavaScript" src="" id="my"></script> <script language="JavaScript"> setTimeout("document.getElementById('my').src='include/...文件...php'; ",300

  • 原生Js页面滚动延迟加载图片实现原理及过程

    原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html

  • js实现延迟加载的方法

    本文实例讲述了js实现延迟加载的方法.分享给大家供大家参考.具体分析如下: setTimeout('yourFunction()',5000); //5秒后执行yourFunction(),只执行一次 setInterval('yourFunction()',5000); //每隔5秒执行一次u 如果在yourFunction()中再次调用了setTimeout('yourFunction()',5000),可以完成类似于 setInterval('yourFunction()',5000)的功

  • javascript 延迟加载技术(lazyload)简单实现

    1.前言 懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等.因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)称不支持新版浏览器. 2.lazyload在什么场合中应用比较合适? 涉及到图片,falsh资源

  • jquery延迟加载外部js实现代码

    复制代码 代码如下: var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); $.getScript(gaJsHost + "google-analytics.com/ga.js",function(){ try { var pageTracker = _gat._getTracker("U

随机推荐