用 js 和 css3 做動畫時，如何判斷所有的圖片元素都載入完了？

為了避免「圖片還未載入完，動畫已經開始」這個問題，需要判斷必要的幾張圖片載入完成後再開始動畫，就比如下面這樣子：

images.onload = function () {
// 圖片載入完成，然後執行動畫
anim.go();
}


這不是解決方案，因為有可能會有好幾張圖片。

---

EasySlide/loader.js at master · xiaojue/EasySlide · GitHub

可以把頁面的圖片都先預載入，再調用你的主邏輯。

---

SO: Test if all images are loaded

---

把需要載入資源全部用 js的方式新建存入緩存。

比如你又20張圖片

那麼需要通過 new Image() 來新建每一個圖片資源。在新建的時候會有 onload onerror 這些事件。和complete屬性。

通過這些事件和屬性來判斷一個圖片是否正確的被緩存起來了，如果緩存到了。如果正確緩存在自己的計數器上標識+1.

比如，你20張圖片，緩存成功1張，那麼頁面可能更新提示已載入5%。

同理其他資源都是用這樣的方式實現。

---

$(function(){
var totalImg = $("img").length;
var currentImg = 0;
$("img").on("load",function(){
currentImg++;
console.log(currentImg)
if(currentImg === totalImg){
alert("所有圖片載入完畢");
//do something
}
})
})


---

我覺得很簡單啊

定義一個全局變數~

var pic_loaded = 0;

然後在每個圖片上加一個

.onload=pic_loaded();

然後定義函數

pic_loaded(){

pic_loaded += 1 ;

if (pic_loaded == pic_num){

pic_all_loaded();

};

}

---

可以未載入完成的時候就暫停，像播放視頻一樣，一般來說應該是等全部圖片載入完成吧

---

如上所說的，思路是把圖片資源作為對象集中在一起寫onload,用外部變數判斷是否全部載入

---

推薦閱讀：