Pass variable to function in Javascript

Question

This is not a duplicate question. I have been working on loading images after the complete page load. I want to pass variable i value to the onload function of img but somehow that's not working.

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

I tried following onload function

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);

but in this way, I saw that function is executed immediately even the image is not completely loaded may be because this is somehow working as anonymous function.

I also tried by setting attribute to my img object and getting its value inside function like this

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
};

but that's not working as well. How can I pass variable i value to my onload function?

• Arun P Johny: The IIFE has to return a function like img.onload = (function(x) { return function() { imgs[x].src = imgs[x].getAttribute('data-src'); imgs[x].setAttribute('srcLoaded', 'true'); //where x is i value from for loop } })(i);
• u_mulder: But it still be only one function, as it's overwritten in each iteration.
• Abdul Jabbar: @ArunPJohny I already mentioned that your suggested way is not working.

Answer 1

You can bind the variable on your callback function:

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

• Abdul Jabbar: I have about 250 images on my page and when I run with your suggested way, it stops and hangs for a while which is kinda bad impression
• Adam: Can you show the jsfiddle example? I'm pretty sure, the delay caused by this code.
• Adam: @AbdulJabbarWebBestow I've commented out a line. Pls try like this.
• Abdul Jabbar: No that line is important. Actually that is the important thing to do.
• Abdul Jabbar: because imgs[x] is the real image and img which I set is the only temporary object which loads the actual image and fires the onload function which in turn loads the cached image into real image imgs[x]

Answer 2

Call the function when the page has initialized, once, and let it be done.

Instead of calling onload on your images 250+ times (slowing down your page, as per your comment on Adam's answer, which is the opposite of what you want), maybe see what the tutorial has in store for you.

Re-inventing the wheel, but following this tutorial gives you a simple and straight-forward way to do it https://varvy.com/pagespeed/defer-images.html (and it looks like your code might be derived from it)

Hope this helps

• Abdul Jabbar: I already read that article. What if I want to show a default image until the actual image is loaded?
• zerohero: In the article it shows you the following: img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here" The data:image/png is the default image in src= (which is a placeholder) until the code processes data-src, you can change this to anything you want.
• zerohero: the data:image/png can be set using CSS as well, so you can default all images on the page using CSS once (smaller footprint) and have the JS kick in as soon as the page is loaded fully.