Question

问题：Force事件下载并检测到新图像时，必须动态更改以前加载的图像。说，Force已下载并立即更改，int a = 1; int[] myArr = { a }; // a = 1, myArr[0] = 1 myArr[0] = 2; // a = 1, myArr[0] = 2 object obj = null; object[] objArr = { obj }; // obj = null, objArr[0] = null objArr[0] = new object(); // obj = null, objArr[0] = 'reference to new object'已下载并立即更改，依此类推。我尝试过如下，但它不起作用：

image.onload

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

Answer 1

因为使用var关键字声明的变量是函数作用域，并且在循环结束后执行onload函数变量i将不等于i中的值onload执行时的迭代。

请使用此代码替换您的imgs[i].onload = function(index) { return function(index) { alert('picture' + index + ' loaded'); IMG[index].setAttribute('src', imgs[index].getAttribute('src')); } }(i)功能。它将创建一个新的功能范围。

function loadImage() {
  var images = document.getElementsByTagName('img');
  for (var i = 0; i <= images.length; i++) {
    var newImg = new Image();
    newImg.src = "http://dummyimage.com/150/000/fff&text=Image" + i;
    newImg.onload = function(index, newImg) {
      return function() {
        var img = images[index];
        img.parentNode.replaceChild(newImg, img);
      }
    }(i, newImg)
  }
}

我也会改变你的代码，不再加载图像两次。

{
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  } 
}

Answer 2

如果我正确理解了您的问题，您希望在新图像完全加载后立即更改占位符图像。只需传递您依赖缓存的src属性，但下面的方法虽然未经测试，但应该进行替换。 i有点像指针，它保存了不断增长的价值，因此您无法在事件回调中将其用作参考。

＆＃13;

function loadImage() {
  var imgs = document.querySelectorAll("img");
  for (var i = 0; i < imgs.length; i++) {
    var newImg = new Image();
    newImg.src = "picture" + i + ".png";
    newImg.onload = function(img) { // Construct a callback for this <img>
      return function() {
        img.parentNode.replaceChild(newImg, img);
      }
    }(imgs[i]);
  }
}

＆＃13;

编辑：如上所述，我之前在修复原始代码时在代码中引入了另一个范围问题。现在使用回调构造函数修复此问题。

Answer 3

来自this回答，

嗯，问题是变量i，在你的每一个内   匿名函数，被绑定到同一个变量之外   功能

您要做的是将每个函数中的变量绑定到a   功能之外的单独的，不变的值：

所以你的代码应该看起来像这样：

<script type="text/javascript">
  
     var IMG = document.getElementsByTagName('img'); 
     var imgs = new Array(); 
 loadImage = function(){          
     for(var i=0;i<IMG.length;i++)
     {
       imgs[i] = new Image();
       imgs[i].src = "http://dummyimage.com/150/000/fff&text=Image"+i;
       imgs[i].onload = onloaded(i);
     }              
 } 
 
function onloaded(i) {
   IMG[i].setAttribute('src',imgs[i].getAttribute('src')); 
}
  
</script>    
 <img src="http://placehold.it/150" />
 <img src="http://placehold.it/150" />
 <img src="http://placehold.it/150" />
 <img src="http://placehold.it/150" />
 <input type="button" value="Load Image" onclick="loadImage()">

注意：IMG的数组索引以0

开头

如何动态更改网页上的图像？

3 个答案: