如何在一個陣列中加載多張要褪色的圖像？

Question

我有以下代碼，它們假設要加載幾張圖像然后使其褪色。 但是，要在每次淡入淡出時加載所有圖像，而是每次都加載相同圖像。 有人有什么主意嗎？

http://jsfiddle.net/7kacz43o/8/

var img, i,
    imageCount = [1,2,3,4],
    div = document.getElementById('foo');
console.log(imageCount.length);
for(i = 1; i <= imageCount.length; i++){
    img = new Image();
    img.onload = function() {
        div.appendChild(img);
    };
    img.src = 'http://tdhdemo.com/frames/frame_' + i + '.jpg';
    img.id = "top";
}

Answer 1

您可以在onload重用img ，這意味着當for運行下一個索引時， img將被覆蓋。 在onload事件中，僅將最后一個img附加到div（4次，但結果是一個圖像標簽）。

由於您在img本身上附加了onload函數，因此可以使用this來引用圖像：

img.onload = function() {
    div.appendChild(this);
};

---

另一個建議：為什么不使用數組及其length來驅動for循環，為什么不直接使用count變量呢？

var imageCount = 4;
...
for (i = 1; i <= imageCount; i++) {