javascript加载的img仍然有0高度答案

【问题标题】：javascript loaded img still has 0 heightjavascript加载的img仍然有0高度
【发布时间】：2014-11-05 10:05:23
【问题描述】：

这个问题让我很恼火，因为它适用于一组图像，而不适用于另一组。

我有一个这个对象：

function PreLoader(toLoad, parent, images) {
  var errored = 0;
  var loaded  = 0;
  var toLoad  = toLoad;

  function allLoaded() {
    // reset the counters so it can be used again
    loaded  = 0;
    errored = 0;

    // determine which img is the tallest
    var l = 0;
    for (var i = 0; i < images.length; i++) {
      l = (l > images[i].height()) ? l : images[i].height();
    }

    // set the height of the container to the tallest
    // unless it's already bigger
    // height() is from jQuery
    if (parent.obj.height() < l)
      parent.obj.css("height", l);
  }

  this.load  = function() {
    ++loaded;
    if (loaded + errored == toLoad)
      allLoaded();
  };

  this.error = function() {
    ++errored;
    if (loaded + errored == toLoad)
      allLoaded();
  };
}

我一直以类似的方式使用它：

var parent = {obj: $("#some-img-container")};
var slabLoader = new PreLoader(2, parent, [external.slab, internal.slab]);
external.slab.src = "2.png";
external.slab.onload  = slabLoader.load;
external.slab.onerror = slabLoader.error;
internal.slab.src = "1.png";
internal.slab.onload  = slabLoader.load;
internal.slab.onerror = slabLoader.error;

问题是，有时它不起作用。我有多组绝对定位的图像，因为它们彼此层叠，但它们可以是不同的高度。显然我不能对高度进行硬编码，因为在页面加载之前我不知道它们是什么......而且因为绝对定位的元素不会影响他们的父母大小我不能依赖像height: 100%这样的东西。

allLoaded() 函数中的var l 有时会返回 0，即使图像应该在调用时加载。

我在这个陈述中是正确的还是我做错了什么，它有时只是因为运气才起作用？

html 看起来像这样：

<div class='wrapper-hover'>
  <div class='wrapper-content'>
    <a herf='#' id='some-img-container' class='viewport'>
      <!-- this is where the image goes, added by the script -->
    </a>
    <div class='wrapper-caption'>
      <label class='wrapper-caption-content'>Some Image</label>
    </div>
  </div>
</div>

对不起，如果问题有点难以理解。

更新：

如果我使用 .naturalHeight 而不是 jQuery .height()我会得到磁盘上实际图像的高度，而不是它在被 css 缩放后占用的高度（我正在使用 width: 100% 和留下高度未定义）。但是对于之前返回 0 的图像，它仍然没有任何作用。

在我尝试访问它们的高度之前，我可以确认所有图像都声称.complete 是真实的。

【问题讨论】：

你在使用其他的外部 JS 库吗？ .height() 定义在哪里？
哦，是的...对不起，它是 jQuery。我会编辑帖子
尝试将 jQuery .height() 更改为原生 js .naturalHeight（检查 @MDN）。此外，请仔细检查您是否在加载后测量图像高度。
如果它不起作用有时也许你想看看stackoverflow.com/questions/3588102/…

标签： javascript jquery html css

【解决方案1】：

resize函数的工作版本如下：

function resize( parent, images ) {
  // The largest height seen so far.
  var l = 0;

  // Loop through all the images to
  // determine which is the tallest.
  for ( var i = 0; i < images.length; ++i ) {

    // Create a variable to hold the current value.
    // This just means that we can save time on multiple
    // array access calls.
    var c = images[i];

    // If the current image is actually
    // visible to the user.
    if ( c.offsetParent !== null )

      // If the largest so far is the biggest then
      // keep it, otherwise change it to the new
      // biggest value.
      l = ( l > c.height ) ? l : c.height;
  }

  // If the value of 'l' is 0 then it is likely
  // that the all the images are hidden. In 
  // which case skip the resizing.
  if ( l === 0 )
     return;

  // Set the height of the parent to 'l'
  // this ensures that the parent will resize
  // even if the window is made smaller.
  // adding 2 pixels for good luck :P
  parent.setAttribute( "style", "height:" + (l + 2) + "px" );
}

【讨论】：