如何在一个阵列中加载多张要褪色的图像？

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++) {