淺析js預加載/延遲加載
Pre loader 預加載一般有兩種常用方式:xhr和動態(tài)插入節(jié)點的方式。動態(tài)插入節(jié)點是最為簡單也最為廣泛的一種異步加載方式,然后使用動態(tài)插入節(jié)點方法加載的文件都會 在加載后立即執(zhí)行,javascript的執(zhí)行一方面會占用瀏覽器js執(zhí)行進程,另一方面也可能改變頁面結(jié)構(gòu),而css 的執(zhí)行更有可能讓整個頁面變化。xhr方式雖然不會執(zhí)行腳本,但是由于同域的限制
Lazy loader方式在一些圖片非常多的網(wǎng)站中非常有用,在瀏覽器可視區(qū)域外的圖片不會被載入,直到用戶將頁面滾動到它們所在的位置才加載,這樣對于含有很多 圖片的比較長的網(wǎng)頁來說,可以加載的更快,并且還能節(jié)省服務器帶寬。jQuery插件中也有插件來實現(xiàn)該功能。
在騰訊的QQ空間和微博中就采用這樣技術(shù)實現(xiàn),在大訪問量的網(wǎng)站,這樣就相對可以減少服務器的壓力,在用戶訪問到所見區(qū)域和下面內(nèi)容時候才去請求。而不是傳統(tǒng)的一次把整個頁面下載過來,在下載過程中存在著用戶等待內(nèi)容呈現(xiàn)。
IE中使用new Image().src 去預加載文件。
其他瀏覽器使用動態(tài)插入document.createElement('object')標簽來完成加載。
說明:
1. new Image().src 之所以不能在ff中使用是因為ff對圖片實現(xiàn)了一套單獨的緩存。 同時safari和chrome看起來也沒有被緩存。
2. 動態(tài)插入object 標簽需要插入到非head部分,以觸發(fā)加載。
3. ie7 ie8 也可以通過一些代碼使用動態(tài)object加載文件。
相關(guān)文章
js+canvas實現(xiàn)兩張圖片合并成一張圖片的方法
這篇文章主要介紹了js+canvas實現(xiàn)兩張圖片合并成一張圖片的方法,結(jié)合實例形式分析了JavaScript結(jié)合HTML5 canvas實現(xiàn)圖片合并的操作技巧,并附帶了Java圖片合并的實現(xiàn)方法,需要的朋友可以參考下2019-11-11
JavaSctit 利用FileReader和濾鏡上傳圖片預覽功能
FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件內(nèi)容,使用 File或 Blob對象指定要讀取的文件或數(shù)據(jù)。下面通過本文給大家分享JavaSctit 利用FileReader和濾鏡上傳圖片預覽功能,需要的朋友參考下吧2017-09-09

