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

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

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

測試二種方式:

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

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

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

測試網址

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

DelayScript.png




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

DelayScript2.png

原始碼

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

測試網址

DelayScript3.png

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

DelayScript4.png

原始碼

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

測試網址

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

DelayScript5.png

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

DelayScript7.png

原始碼

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

測試網址

DelayScript8.png

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

DelayScript9.png

原始碼

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

*