1.概述
異步加載：也稱爲圖片的預加載。利用js代碼提前加載圖片，用戶需要時可以直接從本地緩存獲取，但是會增加服務器前端的壓力。這樣做可以提高用戶的體驗，因爲同步加載大圖片的時候，圖片會一層一層的顯示處理，但是經過預加載後，直接顯示出整張圖片。但是在圖片響應時間上優化不是那麼明顯。
2.基本形式
<script>
function loadImage(id,url,callback)
{
var img = new Image();
img.src = url;
// 圖片存在緩存中
if(img.complete){
callback(id,url);
return;
}
// 圖片加載到瀏覽器的緩存中回調函數
img.onload = function(){
callback(id,url);
}
}
</script>3.應用
利用預加載顯示3張1980*1080的圖片，正常加載的話會慢慢顯示出來。而用預加載的話，等一會3張基本同時顯示出來。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="img_box">
<img data-src="http://wozien.com/img/1.jpg" alt="">
<img data-src="http://wozien.com/img/2.jpg" alt="">
<img data-src="http://wozien.com/img/3.jpg" alt="">
</div>
<script>
function loadImage(obj,url,callback)
{
var img = new Image();
img.src = url;
// 判斷圖片是否在緩存中
if(img.complete){
callback.call(img,obj);
return;
}
// 圖片加載到瀏覽器的緩存中回調函數
img.onload = function(){
callback.call(img,obj);
}
}
function showImage(obj){
obj.src = this.src;
}
var imgs = document.querySelectorAll('img');
for(var i = 0;i<imgs.length;i++)
{ // HTMLElement.dataset屬性允許在讀取模式和寫入模式下 訪問在HTML或DOM中的元素上設置多有的自定義數據屬性（data-*）集
var url = imgs[i].dataset.src; loadImage(imgs[i],url,showImage);
}
</script>
</body>
</html>
