淺析js預(yù)加載/延遲加載
Pre loader 預(yù)加載一般有兩種常用方式：xhr和動(dòng)態(tài)插入節(jié)點(diǎn)的方式。動(dòng)態(tài)插入節(jié)點(diǎn)是最為簡單也最為廣泛的一種異步加載方式，然后使用動(dòng)態(tài)插入節(jié)點(diǎn)方法加載的文件都會(huì) 在加載后立即執(zhí)行，javascript的執(zhí)行一方面會(huì)占用瀏覽器js執(zhí)行進(jìn)程，另一方面也可能改變頁面結(jié)構(gòu)，而css 的執(zhí)行更有可能讓整個(gè)頁面變化。xhr方式雖然不會(huì)執(zhí)行腳本，但是由于同域的限制
Lazy loader方式在一些圖片非常多的網(wǎng)站中非常有用，在瀏覽器可視區(qū)域外的圖片不會(huì)被載入，直到用戶將頁面滾動(dòng)到它們所在的位置才加載，這樣對(duì)于含有很多 圖片的比較長的網(wǎng)頁來說，可以加載的更快，并且還能節(jié)省服務(wù)器帶寬。jQuery插件中也有插件來實(shí)現(xiàn)該功能。
在騰訊的QQ空間和微博中就采用這樣技術(shù)實(shí)現(xiàn)，在大訪問量的網(wǎng)站，這樣就相對(duì)可以減少服務(wù)器的壓力，在用戶訪問到所見區(qū)域和下面內(nèi)容時(shí)候才去請(qǐng)求。而不是傳統(tǒng)的一次把整個(gè)頁面下載過來，在下載過程中存在著用戶等待內(nèi)容呈現(xiàn)。
IE中使用new Image().src 去預(yù)加載文件。
其他瀏覽器使用動(dòng)態(tài)插入document.createElement('object')標(biāo)簽來完成加載。
說明：
1. new Image().src 之所以不能在ff中使用是因?yàn)閒f對(duì)圖片實(shí)現(xiàn)了一套單獨(dú)的緩存。 同時(shí)safari和chrome看起來也沒有被緩存。
2. 動(dòng)態(tài)插入object 標(biāo)簽需要插入到非head部分，以觸發(fā)加載。
3. ie7 ie8 也可以通過一些代碼使用動(dòng)態(tài)object加載文件。
相關(guān)文章
使用重寫url機(jī)制實(shí)現(xiàn)驗(yàn)證碼換一張功能
重寫URL機(jī)制：為了保證一個(gè)url的地址唯一，可每次向服務(wù)器傳遞的參數(shù)不一樣即可。此處在實(shí)現(xiàn)驗(yàn)證碼的換一張的功能時(shí)，就是利用了改變參數(shù)列表的值進(jìn)行刷新。具體詳細(xì)代碼大家參考下本文2017-08-08
這篇文章主要為大家詳細(xì)介紹了如何實(shí)現(xiàn)有趣的bootstrap走動(dòng)進(jìn)度條,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
js+canvas實(shí)現(xiàn)兩張圖片合并成一張圖片的方法
這篇文章主要介紹了js+canvas實(shí)現(xiàn)兩張圖片合并成一張圖片的方法,結(jié)合實(shí)例形式分析了JavaScript結(jié)合HTML5 canvas實(shí)現(xiàn)圖片合并的操作技巧,并附帶了Java圖片合并的實(shí)現(xiàn)方法,需要的朋友可以參考下2019-11-11
JavaSctit 利用FileReader和濾鏡上傳圖片預(yù)覽功能
FileReader 對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件內(nèi)容，使用 File或 Blob對(duì)象指定要讀取的文件或數(shù)據(jù)。下面通過本文給大家分享JavaSctit 利用FileReader和濾鏡上傳圖片預(yù)覽功能，需要的朋友參考下吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序刪除處理的相關(guān)代碼，用小程序里的模態(tài)框?qū)崿F(xiàn)刪除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
本文為大家介紹下javascript中如何將時(shí)間戳處理為日期格式，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2014-01-01
Json實(shí)現(xiàn)傳值到后臺(tái)代碼實(shí)例
這篇文章主要介紹了Json實(shí)現(xiàn)傳值到后臺(tái)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
基于Three.js實(shí)現(xiàn)3D玉兔效果的示例代碼
2022年中秋佳節(jié)即將來臨，中秋節(jié)是我們國家的傳統(tǒng)節(jié)日。而中秋與玉兔又往往會(huì)聯(lián)系在一起，本文將用Threejs做一只會(huì)動(dòng)的3D玉兔，感興趣的可以了解一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序工具函數(shù)封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
uniapp如何實(shí)現(xiàn)tabBar之間傳參
這篇文章主要給大家介紹了關(guān)于uniapp如何實(shí)現(xiàn)tabBar之間傳參的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08