DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 利用JS延遲加載百度分享代碼,提高網頁速度
利用JS延遲加載百度分享代碼,提高網頁速度
編輯:關於JavaScript     
發現很多網站在放置百度分享代碼的時候,簡單的將分享代碼放置到固定的網頁位置就完事了,這是非常致命的方式。因為,我經常打開一個網頁的時候,發現在網頁加載到分享代碼的時候,有時候花上幾秒的時候來請求百度的服務器,最後展示分享按鈕。

其實,像這樣對網頁來說不是非常重要的功能,我們大可以用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標簽代碼,並不會有多影響網頁速度。
百度分享代碼通過這樣調整後就算百度的服務器掛了,也不會影響自己的網頁正常顯示。

其實,這樣的技巧還有很多地方都可以用。想網站統計代碼、百度谷歌搜索代碼、第三方廣告代碼等,我們都可以放到網頁底部最後來加載,這樣即使第三方的服務器宕機,我們自己的機器也不會受到多少影響。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved