0

データベース エントリに対応し、名前の一部として ID で識別される画像がシステムに存在するかどうかに応じて、2 つの異なるサムネイル画像のいずれかを読み込もうとしています。

わかりやすくするために少し単純化します。{id}-thumb.png という名前の特定の画像が存在する場合、jQuery を使用してその名前を HTML の src にロードします。画像が存在しない場合は、thumbnail.png という名前の一般的なサムネイル画像を読み込みます。

これは私がこれまでに持っているものです:

var image_path = id + "-thumb.png";
$.ajax({
    url: image_path,
    type: "HEAD",
    error: function() {
        $("li#" + id + " .thumbnail").attr("src","thumbnail.png");
    },
    success: function() {
        $("li#" + id + " .thumbnail").attr("src",id + "-thumb.png");
    }
});

次に、文字列変数 list_item を作成して、挿入する新しい HTML を生成します。

var list_item = "<li id='" + id + "'>";
list_item += "<figure>";
list_item += "<img class='thumbnail' src=''></a>";
list_item += "</figure>";

最後に、この新しい list_item 変数を既存の ul に追加します。

$(".list ul").prepend(list_item);

しかし、画像が表示されず、生成された HTML を見ると、src が空です。

どんなアイデアでも大歓迎です！

4

2 に答える 2

5

イメージが存在しない場合は、「onerror」パラメーターを使用できます。次のようなイメージ タグを生成します。

<img src="something.jpg" onerror="this.src='something_else.jpg'" />
于 2013-05-24T11:06:07.233 に答える
0

デフォルトでジェネリック サムをロードしてから、特定のサムをロードします。存在しない場合はロードされません。

<img src="path/to/generic_thumb.png" data-src="path/to/specific_thumb.png" alt="">

JS

$('img[data-src]').each(function(){

    var $self = $(this), specificSrc = $self.data('data-src');

    // create an img node, inject the real src attribute...
    $("<img />").bind("load", function() {

      // ...when it gets loaded [and the resource is thus available],
      // set it to the actual DOM img element.
      $self.attr('src', specificSrc);

    }).attr("src", specificSrc);

});
于 2013-05-24T11:22:43.537 に答える