在web項目開發(fā)中，經(jīng)常遇到需要加載大量的圖片楼吃，為了?提高用戶體驗演痒，我們可以使用預(yù)加載技術(shù)把圖片預(yù)先加載到瀏覽器中亲轨，這樣用戶使用時，會感覺網(wǎng)速很快鸟顺，接下來給大家介紹一種簡單常用的預(yù)加載方法惦蚊。
瀑布流的實現(xiàn)
1.html代碼很少，如下：
<div>
<progress min="0" max="100" value="0" id="progress"></progress>
</div>
<div class="box"></div>
2.首先介紹一下img的幾個方法讯嫂。
- onload方法蹦锋，它代表圖片加載完畢之后執(zhí)行的函數(shù),下面會介紹；
- onerror方法欧芽， 圖片加載錯誤執(zhí)行的函數(shù)
img.onerror = function(){
console.log("加載圖片出錯了");
}
- onabout方法莉掂，圖片被終止加載/放棄加載圖片 執(zhí)行的函數(shù)
img.onabout = function(){
console.log("握不住的沙，不如就揚了他");
}
3. 創(chuàng)建瀑布流的函數(shù)
如果不加img.onload方法渐裸，所有圖片會全部疊加在上面巫湘，不能從上到下的鋪開，是因為img加載需要時間昏鹃，而代碼執(zhí)行完畢的時間很短很短尚氛，這時獲取到的img.offsetHeight就為零，這樣圖片就會擠在一起洞渤。
使用onload方法是加載一張圖片完畢后或取img.offsetHeight阅嘶，這樣就能獲取到圖片的高度了。
下面使用函數(shù)的遞歸實現(xiàn)的
function createImg(){
var img = document.createElement("img");
// img.src = imgArr[i].src;
img.src = "img/P_0" + i + ".jpg";
i++;
var minIndex = 0;
for(var j = 1; j < heightArr.length ;j++){
if(heightArr[minIndex] > heightArr[j]){
minIndex = j;
}
}
img.style.left = minIndex * 210 + "px";
img.style.top = heightArr[minIndex] + "px";
img.innerHTML = i;
box.appendChild(img);
// onload 代表圖片加載完畢之后執(zhí)行的函數(shù)
img.onload = function(){
progress.value = (i / 16)*100 ;
console.log(img.offsetHeight);
heightArr[minIndex] += (img.offsetHeight+10);
if(i >= 16){
return ;
}
createImg();
}
}
結(jié)果圖如下：
瀑布流.png
圖片預(yù)加載
1.在圖片展示到頁面之前預(yù)先全部加載出來
其中 ：var readyImg = new Image(); 語句也是創(chuàng)建img標簽的一種寫法载迄；和document.createElement("img") 等價讯柔。
使用for循環(huán)創(chuàng)建所有的img標簽，通過設(shè)置src屬性來加載所有的圖片护昧，在所有圖片加載完畢后魂迄，調(diào)用createImg(); 函數(shù)
for(var j = 0 ; j < 16 ; j++){
var readyImg = new Image();
imgArr.push(readyImg);
// 圖片是在設(shè)置src之后就開始請求
readyImg.src = "img/P_0" + j + ".jpg";
readyImg.onload = function(){
count++;
progress.value = (count / 16)*100;
if(count == 16){
console.log("所有圖片加載成功");
createImg()
}
}
}
這樣在用戶網(wǎng)速不好時，使用預(yù)加載惋耙，就能使用戶瀏覽網(wǎng)站時不出現(xiàn)一些bug,或者頁面的布局紊亂,能很好的提高用戶體驗
