Question

我正在尝试在加载较大的图像时替换元素数组的背景（自定义延迟加载？）。我成功地设法只使用一个元素，但是当我试图让它迭代所有元素时，我遇到了一些问题。

我认为我在for循环或其中的onload功能上做错了。

这是我目前的代码：

var cards = document.querySelectorAll('.card');

var currentCard;

if (document.images) {

    var imgs= [img1 = new Image(), img2 = new Image(), img3 = new Image()];

    for (var i = 0; i < imgs.length; i++) {

        currentCard = cards[i];

        console.log(currentCard);

        imgs[i].onload = function() {

            console.log(currentCard);

            currentCard.style.backgroundImage = "url(" + this.src + ")";
        };
    };

    img1.src = "/346954/97bd0a99b786df85fa0e80156e67c450.jpg";
    img2.src = "/346954/29578.jpg";
    img3.src = "/346954/500759045.jpg";
};

我的第一个控制台日志正好返回我想要的三个不同元素： card-1 ， card-2 和 card-3 。

然而，onload函数中的一个总是三次返回相同的一个： card-3 。看起来“onCard”值在onload函数中始终是相同的，即使每次迭代都更新了值。

它必须是非常简单的东西，但我没有看到它。如果有人可以帮助我，我们将非常感激。

Answer 1

currentCard.style.backgroundImage = "url('" + this.src + "')"

迭代onload函数上的元素数组不起作用

1 个答案: