如何將預加載圖像設置到相應的位置？

Question

我最近遇到這樣的問題，不知道如何弄清楚。我有一個HTML圖像表：

1. 表中的行數將根據用戶輸入動態地更改，恕不刷新頁面
2. 表中的每一行包含數據庫中的一個特殊的圖像
3. 我想加載對於行圖像that're顯示器（許多其他行是隱藏的，所以我不希望加載圖像爲他們）

我發現像下面這樣的片段：

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg') 
    .load(function() { 
     if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
      alert('broken image!'); 
     } else { 
      $("#something").append(img); 
     } 
    }); 

但問題是，在.load方法，圖像本身會忘記它應該放在（因爲我在表中使用了循環加載圖像逐行）

有沒有人知道如何解決這個問題？

Answer 1

您需要將圖像與其行相關聯。如果您在創建圖像時手邊有一排，則可以在回調到.load時使用它。例如，如果在某些時候，你有新行的列表，你可以做這樣的事情：

var loadImageForRow = function(row) { 
    var img = $("<img/>").attr('src', 'my-image-source.png') 
     .load(function() { 
      if (!this.complete || typeof this.naturalWidth == 'undefined' || this.naturalWidth == 0) { 
       // handle broken image 
      } else { 
       row.find('.image-cell').append(img); 
      } 
     }); 
}); 

newRows.each(function() { loadImageForRow($(this)); } 

它使用從回調內部封閉的封閉的row參數。或者，您可以使用圖像上或行上的兩個數據屬性（例如img元素上的data-row-index='17'）或任何等效機制關聯這兩個數據屬性。