如何在一个数组中加载多个要褪色的图像

How can I load multiple images in one array to be faded?

本文关键字：加载 褪色 图像 一个 数组      更新时间：2023-09-26

我有下面的代码，假设加载几个图像，然后将它们淡入淡出。但为了在每次淡入淡出时加载所有图像，它每次都加载相同的图像。有人知道吗？

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";
}

在onload中重用img，这意味着当for为下一个索引运行时，img将被覆盖。在onload事件中，只有最后一个img会被附加到div（4次，但会产生一个图像标记）。

由于您在img上附加了onload函数，因此可以使用this来引用图像：

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

另一个建议：与其使用数组及其length为for循环供电，为什么不直接使用计数变量呢？

var imageCount = 4;
...
for (i = 1; i <= imageCount; i++) {
相关文章：