How to dynamically bind variable with a function?

Question

Problem: The previously loaded images have to be changed dynamically when a new image is downloaded and detected by image.onload event. Say, picture1.png downloaded and immediately changed, picture2.png downloaded and immediately changed and so on. I have tried it as below, but it didn't work:

<script type="text/javascript">
 loadImage = function(){    
     var imgs = new Array();    
     var IMG = document.getElementsByTagName('img');    
     for(var i=1;i<=IMG.length;i++)
     {
       imgs[i] = new Image();
       imgs[i].src = "picture" + i + ".png";
       imgs[i].onload = function(){
         alert('picture'+i+' loaded');
         IMG[i].setAttribute('src',imgs[i].getAttribute('src'));
       }           
     }              
 }    
</script>    
 <img src="sample.png" />
 <img src="sample.png" />
 <img src="sample.png" />
 <img src="sample.png" />
 <input type="button" value="Load Image" onclick="loadImage()">

How things will happen in the desired manner?

Rayon · Accepted Answer · 2016-04-03T09:43:19.970

0

Use closure as onload event is asynchronous. Value of i in the onload handler will be maximum value of the loop as by the time it is invoked, loop is iterated already.

function loadImage() {
  var temp = ['http://lorempixel.com/400/200/sports/1/', 'http://lorempixel.com/400/200/sports/2/', 'http://lorempixel.com/400/200/sports/3/'];

  var IMG = document.getElementsByTagName('img');//Get all the image tag elements from DOM
  for (var i = 0; i < IMG.length; i++) { //Loop for all elements selected
    var image = new Image();// New Image() object
    image.onload = (function(i, image) { // Closure to keep value from loop(i and image) as javascript is having function level scope and using closure, we can keep the value in the memory to be used later
      return function() { // return function as a handler of image onload and it will be getting valid(not final) value of the loop(current instance)
        alert(image.src);
        IMG[i].src = image.src;
      }
    })(i, image);
    image.src = temp[i];
  }
}

<img src="http://lorempixel.com/400/200/sports/5/" />
<img src="http://lorempixel.com/400/200/sports/6/" />
<img src="http://lorempixel.com/400/200/sports/7/" />
<input type="button" value="Load Image" onclick="loadImage()">

edited Apr 03 '16 at 09:43

answered Apr 03 '16 at 09:20

Rayon

36,219
4
49
76

Excellent! but in firefox it alerts from 3 up to 0 in the reverse order – Parveez Ahmed Apr 03 '16 at 09:36
It depends on the time taken by image to load.. – Rayon Apr 03 '16 at 09:37
I could not get what magic you have poured! Would you mind to explain your code as I am totally unfamiliar with this. (the nesting you have done, also the enclosing parentheses etc) @Rayon – Parveez Ahmed Apr 03 '16 at 09:42
It is all right. But, could not get the (function(i,..)(i,image) notation. Thanks again. – Parveez Ahmed Apr 03 '16 at 10:10
http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example might help you... – Rayon Apr 03 '16 at 10:12

score 0 · Answer 2 · answered Apr 03 '16 at 09:21

0

You can user javascript native "bind" method to do this. For example:

var fn = function(index){
     alert('picture'+ index +' loaded');
     this.setAttribute('src',imgs[index].getAttribute('src'));
};
imgs[i].onload = fn.bind(IMG[i], i);

answered Apr 03 '16 at 09:21

abeyaz

3,034
1
16
20

How to dynamically bind variable with a function?

2 Answers2