0

私は最近そのような問題に遭遇しましたが、それを理解する方法がわかりません。HTML画像テーブルがあります：

  1. テーブルの行数は、ユーザー入力に応じてページを更新しなくても動的に変化します
  2. テーブルの各行には、データベース内の 1 つの特別な画像が含まれています
  3. 表示者である行の画像をロードしたい (他の多くの行は非表示になっているため、それらの画像をロードしたくない)

次のようなスニペットを見つけました。

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 ループを使用してテーブル内の行ごとに画像をロードするため)。

この問題を解決する方法を知っている人はいますか?

4

1 に答える 1

0

画像をその行に関連付ける必要があります。画像を作成するときに行が手元にある場合は、 へのコールバックで使用できます.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、コールバック内の囲んでいるクロージャーからのパラメーターを使用します。または、画像または行のデータ属性を使用して 2 つを関連付けることができます (たとえばdata-row-index='17'、img要素に何かを配置する)、または同等のメカニズムを使用できます。

于 2012-10-02T07:02:44.557 に答える