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

原始碼

發表迴響