将变量传递给Javascript函数

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 （看起来您的代码可能是从中获得的）

希望这可以帮助