JavaScript、廣告、圖形等延遲載入方法

yku javascript, wordpress

最近主機一直有問題，排程重啟Service、調整Apache MySQL設定值又換了wordpress cache也都沒用，後來研究了好久判斷可能是Bloggerads載入時太慢所以都卡住了，所以找了個方法讓它的JavaScript延遲載入，在網頁內容都載入後，才開始載入Bloggerads廣告。

原理是利用瀏覽器的特性，當元素被設定不顯示時裡面的圖形、flash內容及javascript等都不會真正的載入，只有在設定顯示時才會開始載入。

測試二種方式：

一種方式是先把需求的script在一開始載入好，需要顯示時才設定顯示，一種是連script都在最尾端（也可以使用onReady等方式）才載入。後一種的效能應該會比較好一點，不過比較麻煩。

這裡會需要使用到FireFox的FireBug使用方法可以參考網頁除錯觀察的Browser工具FireBug-開發者工具-開發人員工具

第一種方式 一開始就載入好JavaScript等待

測試網址

當網頁載入完成時，可以看到並沒有正真載入廣告

DelayScript.png

當按下按鈕後，就會正實的載入廣告內容了

DelayScript2.png

原始碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Javascript延遲載入範例1-廣告,圖形按鈕顯示</title>
<meta name="description" content="隨身筆記，系統設定、簡易教學、Java、Javascript延遲載入第一個範例...等" /> 
<meta name="keywords" content="Java,Apache,Tomcat,JSP,Visual Studio Express,windows xp,Vista,Eclipse,php,mysql,oracle,javascript,software,軟體,DelayLoad javascript" /> 

</head>
<body>
<p><a href="http://blog.yslifes.com">回我的blog</a></p>
<div id="showAD" style="visibility:hidden;width:450px;height:120px">
    <script type="text/javascript">
        document.write("<script type=\"text\/javascript\" src=\"http:\/\/js1.bloggerads.net\/showbanner.aspx?blogid=20060514000203&charset=utf-8\"><\/script>");
    </script>
</div>

<div style="padding-top:10px;padding-bottom:10px">
<button onclick="document.getElementById('showAD').style.visibility='visible';">
按我展開內容</button>
</div>


</body>
</html>

再來一個測試，在body前才載入廣告內容，這裡用一個alert來區分顯示廣告前及顯示廣告後

測試網址

DelayScript3.png

跟上一個範例有一效果，不需要click動作，或是讓網頁直接執行都可以

DelayScript4.png

原始碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Javascript延遲載入範例2-廣告,圖形Alert後顯示</title>
<meta name="description" content="隨身筆記，系統設定、簡易教學、Java、Javascript延遲載入第二個範例...等" /> 
<meta name="keywords" content="Java,Apache,Tomcat,JSP,Visual Studio Express,windows xp,Vista,Eclipse,php,mysql,oracle,javascript,software,軟體,DelayLoad javascript" />
</head>
<body>
<p><a href="http://blog.yslifes.com">回我的blog</a></p>
<div id="showAD" style="visibility:hidden;width:450px;height:120px">
    <script type="text/javascript">
        document.write("<script type=\"text\/javascript\" src=\"http:\/\/js1.bloggerads.net\/showbanner.aspx?blogid=2006067000203&charset=utf-8\"><\/script>");
    </script>
</div>
<div style="padding-top:10px;padding-bottom:10px">
<script type="text/javascript">
alert("這裡alert視窗後開始才會顯示廣告");
document.getElementById('showAD').style.visibility='visible';
</script></div>

</body>
</html>

第二種方式 JavaScript在最後才載入，載入後才搬到需要的地方

測試網址

當網頁載入完成時，可以看到並沒有正真載入廣告

DelayScript5.png

當按下按鈕後，就會正實的載入廣告內容了

DelayScript7.png

原始碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Javascript延遲載入範例3-廣告,圖形按鈕顯示</title>
<meta name="description" content="隨身筆記，系統設定、簡易教學、Java、Javascript延遲載入第三個範例...等" /> 
<meta name="keywords" content="Java,Apache,Tomcat,JSP,Visual Studio Express,windows xp,Vista,Eclipse,php,mysql,oracle,javascript,software,軟體,DelayLoad javascript" />

</head>
<body>
<p><a href="http://blog.yslifes.com">回我的blog</a></p>
<div id="showAD" style="width:450px;height:120px">
</div>

<div style="padding-top:10px;padding-bottom:10px"><button onclick="clickMe();">按我展開內容</button></div>
<div style="display:none" id="hiddenAD">
<script type="text/javascript">
    document.write("<script type=\"text\/javascript\" src=\"http:\/\/js1.bloggerads.net\/showbanner.aspx?blogid=20040914000203&charset=utf-8\"><\/script>");
</script></div>
<script type="text/javascript">
function clickMe(){
    document.getElementById("showAD").innerHTML = document.getElementById("hiddenAD").innerHTML;
    document.getElementById("hiddenAD").innerHTML ="";
}
</script>

</body>
</html>

另一個測試，在body前才載入廣告內容，這裡用一個alert來區分顯示廣告前及顯示廣告後

測試網址

DelayScript8.png

跟上一個範例有一效果，不需要click動作，或是讓網頁直接執行都可以

DelayScript9.png

原始碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Javascript延遲載入範例4-廣告,圖形Alert後顯示</title>
<meta name="description" content="隨身筆記，系統設定、簡易教學、Java、Javascript延遲載入第四個範例...等" /> 
<meta name="keywords" content="Java,Apache,Tomcat,JSP,Visual Studio Express,windows xp,Vista,Eclipse,php,mysql,oracle,javascript,software,軟體,DelayLoad javascript" />
<body>
<p><a href="http://blog.yslifes.com">回我的blog</a></p>
<div id="showAD" style="width:450px;height:120px;padding-bottom:10px">
</div>

<div style="display:none" id="hiddenAD">
<script type="text/javascript">
document.write("<script type=\"text\/javascript\" src=\"http:\/\/js1.bloggerads.net\/showbanner.aspx?blogid=200678000203&charset=utf-8\"><\/script>");
</script></div>
<script type="text/javascript">
alert("這裡alert視窗後開始才會顯示廣告");
document.getElementById("showAD").innerHTML = document.getElementById("hiddenAD").innerHTML;
document.getElementById("hiddenAD").innerHTML ="";

</script>

</body>
</html>

發表迴響