<img>width 在重负载下返回 0答案

【问题标题】：<img>width returns 0 under heavy load<img>width 在重负载下返回 0
【发布时间】：2012-11-29 22:53:35
【问题描述】：

下面的 handleFiles 方法从拖放和文件输入中传递文件。在获取给定文件的数据 url 后，它会将其传递给 processImage 函数。此函数创建一个新图像并设置该图像的 src 和文件。然后我根据传入图像的宽度采取不同的操作，并将图像插入到 dom 中。但是，我注意到当放入一堆图像时 imageWidth 将设置为 0。我已经确认 image.src 设置正确，并且单独放入相同的图像可以正常工作。我还确认，如果我删除宽度计算，图像确实会在页面上正确显示。当我进入调试器时，我可以确认在 imageWidth 设置为 0 i.width 后立即返回正确的值。起初我认为这可能是 Chrome 中的线程问题，但当我在 FireFox 中看到它时，我也感到震惊。我无法确定某个阈值，但是您对浏览器施加的负载越多，正确获取宽度的可能性就越小。

我在 FireFox 16.0.2 和 Chrome 23.0.1271.95 中都发现了这个问题。

function handleFiles(files) {

  for (var i = 0; i < files.length; i++) {
    var file = files[i];

    if( !isImage(file) ) { 
      continue;
    }   

    var reader = new FileReader();

    reader.onloadend = function(e) {
      var dataURL = e.target.result;
      processImage(file, dataURL);
    }   

    reader.readAsDataURL(file);
  }
}

function processImage(file, dataURL) {
  var i = new Image();
  i.src  = dataURL;
  i.file = file;

  //console.log(i);
  var maxWidth = 600;
  var imageWidth = i.width;

  ......
}

【问题讨论】：

标签： javascript image html fileapi

【解决方案1】：

与所有图片一样，它们可能需要一些时间来加载，然后才会告诉您它们的宽度：

  var i = new Image();
  i.onload = function() {
     //console.log(i);
     var maxWidth = 600;
     var imageWidth = this.width;
  }
  i.src  = dataURL;
  i.file = file;

【讨论】：

【解决方案2】：

宽度（和高度）可能为 0，因为它尚未加载。

尝试像这样添加load 事件：

function processImage(file, dataURL) {
  var i = new Image();


  i.addEventListener("load", function () {
    var maxWidth = 600;
    var imageWidth = i.width;

    ......

  });

  i.src  = dataURL;
  i.file = file;

}

【讨论】：

优秀。谢谢你们俩。