js預(yù)加載
意義:
與懶加載相反灼擂,有時我們需要實現(xiàn)例如快速快速切換頁面、圖片之類的功能時,能盡快的加載出我們所需的圖片會極大提升用戶體驗育灸,這時用預(yù)加載將圖片先緩存到瀏覽器,用戶使用需顯示圖片時無疑會順暢很多昵宇。
原理:
1.在html中用img標(biāo)簽
2.使用JavaScript的Imgage對象
3.ajax請求圖片
4.preload.js插件
實現(xiàn)
1.使用html文檔中img標(biāo)簽
<img src="./img/loading.jpg" alt="圖片" style="display:none">
執(zhí)行文檔時直接加載進(jìn)來只不過讓其不顯示
2.使用Imgage對象
var img=new Image()
img.src="http://www.wwenj.com/img/1.jpg"
js中執(zhí)行到該語句后就會加載進(jìn)來
3.使用ajax請求圖片
直接用ajax請求很好理解不貼代碼磅崭,
優(yōu)點:ajax請求過程中能有更加詳細(xì)的操作
缺點:有跨域
-
preload.js預(yù)加載插件
"PreloadJS"便于預(yù)先加載資源:圖像、聲音瓦哎、數(shù)據(jù)砸喻、或其他的JS [PreloadJS插件地址:](http://www.createjs.cc/preloadjs/)[http://www.createjs.cc/preloadjs/]
(PreloadJS提供了一個一致的方式預(yù)先加載在HTML應(yīng)用的內(nèi)容,以及預(yù)加載可以使用HTML標(biāo)
簽作為XHR完成蒋譬。
默認(rèn)恩够, PreloadJS 將嘗試使用XHR加載內(nèi)容,因為它提供了進(jìn)度和完成事件方面的更好支持羡铲,
然而由于跨域的問題蜂桶,它可能仍然是優(yōu)選使用基于標(biāo)簽的負(fù)載代替)
代碼:
var queue = new createjs.LoadQueue();
queue.on("complete", handleComplete, this);
queue.loadManifest([
{id: "myImage", src:"path/to/myImage.jpg"}
]);
function handleComplete() {
var image = queue.getResult("myImage");
document.body.appendChild(image);
}
這就是圖片預(yù)加載的實現(xiàn)。