Question

我最近遇到了这样的问题而不知道怎么弄清楚。我有一个HTML图像表：

根据用户输入
表格中的每一行都包含数据库中的一个特殊图像
我想为显示行的行加载图像（许多其他行都被隐藏，所以我不想为它们加载图像）

我找到了以下代码段：

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方法中，图像本身会忘记它应放在哪里（因为我使用for循环在表中逐行加载图像）

有人知道如何解决这个问题吗？

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参数。或者，您可以使用图像上或行上的数据属性（例如，在data-row-index='17'元素上添加类似img）或任何等效机制来关联两者。

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

1 个答案: