首頁 > web前端 > js教程 > 淺析js預載/延遲載入_javascript技巧

淺析js預載/延遲載入_javascript技巧

WBOY
發布: 2016-05-16 16:35:28
原創
1033 人瀏覽過

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載入檔案。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板