如何将预加载图像设置到相应的位置？

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'）或任何等效机制关联这两个数据属性。