我怎么知道 <img> 使用jQuery在div中加载

Question

我怎么知道是否全部使用jQuery加载到div中

我想在#slider div中加载所有img后执行此操作

var imgHeight = $("#slider img").height();
alert(imgHeight);

Answer 1

您可以使用load事件

$('#slider img').load(function(){
    var imgHeight = $(this).height();
    alert(imgHeight);
});

如果有多个图像，并且只想在它们全部加载后获得高度，请尝试以下代码

var img = $('#slider img');
var length = img.length;

img.load(function(){
    length--;

    if(length === 0){
        alert("All images loaded");
    };
});

---

好吧，我已经测试了代码，看来问题与代码无关。 当将页面中已包含图像的图像加载到缓存中时，这是我得到的：

奇怪的是，当我强制浏览器不使用缓存时，不会发生这种情况。

Answer 2

尝试这个：

• 将onload事件侦听器附加到滑块中的每个图像。
• 在侦听器中：
  • 给当前图像一个自定义属性，以将其标记为“就绪”。
  • 检查所有图像是否准备就绪。 如果是这样，请执行您的操作（即alert(imageHeight) ）

未经测试：

(function(){
  var slider=document.getElementById('slider'),
      images=slider.getElementsByTagName('img'), image, i=-1;

  while (image=images[i]) {
    image.onload=function(){
      this['data-ready']=true;
      var image, i=-1;
      while (image=images[i]) if (!image['data-ready']) return;
      // all images are ready; do your thing here
      // ...
    }
  }
}());