DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淺析js預加載/延遲加載
淺析js預加載/延遲加載
編輯:關於JavaScript     

Pre loader 預加載一般有兩種常用方式:xhr和動態插入節點的方式。動態插入節點是最為簡單也最為廣泛的一種異步加載方式,然後使用動態插入節點方法加載的文件都會 在加載後立即執行,javascript的執行一方面會占用浏覽器js執行進程,另一方面也可能改變頁面結構,而css 的執行更有可能讓整個頁面變化。xhr方式雖然不會執行腳本,但是由於同域的限制

Lazy loader方式在一些圖片非常多的網站中非常有用,在浏覽器可視區域外的圖片不會被載入,直到用戶將頁面滾動到它們所在的位置才加載,這樣對於含有很多 圖片的比較長的網頁來說,可以加載的更快,並且還能節省服務器帶寬。jQuery插件中也有插件來實現該功能。

在騰訊的QQ空間和微博中就采用這樣技術實現,在大訪問量的網站,這樣就相對可以減少服務器的壓力,在用戶訪問到所見區域和下面內容時候才去請求。而不是傳統的一次把整個頁面下載過來,在下載過程中存在著用戶等待內容呈現。

IE中使用new Image().src 去預加載文件。
其他浏覽器使用動態插入document.createElement('object')標簽來完成加載。

說明:
1. new Image().src 之所以不能在ff中使用是因為ff對圖片實現了一套單獨的緩存。 同時safari和chrome看起來也沒有被緩存。
2. 動態插入object 標簽需要插入到非head部分,以觸發加載。
3. ie7 ie8 也可以通過一些代碼使用動態object加載文件。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved