我怎么知道 <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
      // ...
    }
  }
}());