Question

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

我有一个这个对象：

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%这样的事情。

var l函数中的

allLoaded()有时会返回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缩放后的高度（I＆＃39; m使用width: 100%并保持高度未定义）。但是，对于之前返回0的图像，它仍然无效。

我可以确认所有图片在我尝试访问其高度之前声称.complete为真。

Answer 1

调整大小功能的工作版本如下：

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" );
}

javascript加载img仍然有0高度

1 个答案: