Передать функцию в Javascript

Question

Это не дублирующий вопрос. Я работаю над загрузкой изображений после полной загрузки страницы. Я хочу передать переменную i значение функции onload img, но как-то это не работает.

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

Вызвать функцию, когда страница инициализируется один раз, и пусть это будет сделано.

Вместо того, чтобы вызывать нагрузку на свои изображения в 250 раз (замедление вашей страницы, в соответствии с вашим ответом на ответ Адама, что противоположно тому, что вы хотите), возможно, посмотрите, что у вас есть в учебнике.

Re изобретать колесо, но после этого учебника дает вам простой и прямым способ сделать это https://varvy.com/pagespeed/defer-images.html (и, похоже, что ваш код может быть получен из него)

Надеется, что это помогает