通过变量在Javascript中运行

这不是一个重复的问题。我一直在完成页面加载后加载图像。我想要将变量i值传递给img的onload函数，但不知何故，这不起作用。通过变量在Javascript中运行

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函数？

来源

2016-03-01 Abdul Jabbar Dumrai

IIFE必须返回一个函数，如'img.onload =（function（x）{return（）{img [x] .src = imgs [x] .getAttribute（'data-src'）; imgs [ x] .setAttribute（'srcLoaded'，'true'）; //其中x是来自for循环的i值 } }）（i）;' –

但它仍然是onl一个函数，因为它在每次迭代中被覆盖。 –

@ArunPJohny我已经提到你的建议方式不起作用。 –

可以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'); 
    } 
}

来源

2016-03-01 12:17:36 Adam

我的页面上有大约250张图片，当我按照建议的方式运行时，它会停下来并挂起一段时间，这是一种不好的印象 –

您可以显示jsfiddle示例吗？我很确定，这个代码造成的延迟。 – Adam

@AbdulJabbarWebBestow我已经注释掉了一行。请尝试这样。 – Adam

呼叫时，页面已经初始化，一旦功能，让它来完成。

而不是在你的图片上调用onload 250次（根据你对Adam的回答的评论，这与你想要的相反），可能会看看本教程为你准备的内容。

重新发明轮子，但按照本教程为您提供了一个简单而直接的方式做到这一点https://varvy.com/pagespeed/defer-images.html（它看起来像你的代码可以从它派生）

希望这有助于

来源

2016-03-01 13:11:49 zerohero

我已经阅读过那篇文章。如果我想在加载实际图像之前显示默认图像，该怎么办？ –

在这篇文章中，它显示了以下内容：img src =“data：image/png; base64，R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs =”data-src =“your-image-here”data：image/png是src中的默认图像=（这是一个占位符），直到代码处理data-src，你可以改变它为任何你想要的。 – zerohero

data：image/png也可以使用CSS设置，所以你可以使用CSS默认页面上的所有图像（更小的尺寸），并在页面加载完毕后立即启动JS。 – zerohero

通过变量在Javascript中运行

回答

相关问题