Question

问题：当image.onload事件下载并检测到新图像时，必须动态更改先前加载的图像。说，picture1.png下载并立即更改，picture2.png下载并立即更改，依此类推。我尝试过如下，但它不起作用：

<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()">

如何以理想的方式发生事情？

Answer 1

使用closure因为onload事件是异步的。 i处理程序中onload的值将为maximum循环的值，因为它是invoked的时间，循环已经迭代。

＆＃13;

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

＆＃13;

<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()">

＆＃13;

Answer 2

您可以使用javascript native＆＃34; bind＆＃34;这样做的方法。例如：

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

如何使用函数动态绑定变量？

2 个答案: