Question

这不是一个重复的问题。我在整个页面加载后一直在加载图像。我想将变量i值传递给img的onload函数，但不知怎的，它不起作用。

var imgs = document.getElementsByTagName('img');
var totalImages = imgs.length;
for(var i=0; i<totalImages; i++)
{
    if(imgs[i].hasAttribute('data-src'))
    {
        var img = new Image();
        img.onload = function()
        {
            imgs[x].src = imgs[x].getAttribute('data-src');
            imgs[x].setAttribute('srcLoaded','true');
            //where x is i value from for loop
        };
        img.src = imgs[i].getAttribute('data-src');
    }
}

我尝试过关注onload函数

img.onload = (function(x)
{
    imgs[x].src = imgs[x].getAttribute('data-src');
    imgs[x].setAttribute('srcLoaded','true');
    //where x is i value from for loop
})(i);

但是通过这种方式，我看到即使图像未完全加载也立即执行该功能可能是因为这是以某种方式作为匿名函数工作。

我还尝试将属性设置为我的img对象，并将其值放在函数中，如此

img.setAttribute('idi',i);
img.onload = function()
{
    var x = img.getAttribute('idi');
    imgs[x].src = imgs[x].getAttribute('data-src');
    imgs[x].setAttribute('srcLoaded','true');
    //where x is i value from for loop
};

但那不行。如何将变量i值传递给我的onload函数？

Answer 1

您可以bind回调函数中的变量：

var imgs = document.getElementsByTagName('img');
var totalImages = imgs.length;
for (var i = 0; i < totalImages; i++) {
    if (imgs[i].hasAttribute('data-src')) {
        var img = new Image();
        img.onload = (function (x) {
            imgs[x].src = imgs[x].getAttribute('data-src');
            imgs[x].setAttribute('srcLoaded', 'true');
            //where x is i value from for loop
        }).bind(img, i);
        img.src = imgs[i].getAttribute('data-src');
    }
}

Answer 2

在页面初始化后调用该函数，一次，然后完成。

不要在图片上调用onload 250次以上（根据你对Adam的回答，这与你想要的相反，放慢页面速度），也许可以看看教程中存储的内容是什么你。

重新发明轮子，但是按照本教程为您提供了一种简单而直接的方法https://varvy.com/pagespeed/defer-images.html（看起来您的代码可能是从它派生的）

希望这有帮助

将变量传递给Javascript中的函数

2 个答案: