Question

我正在尝试根据是否在系统上存在与数据库条目对应并且使用id作为其名称的一部分标识的图像来加载两个不同的缩略图图像中的一个。

为了清晰起见，如果存在名为{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是空的。

任何想法都非常感激！

Answer 1

如果图像不存在，您可以使用“onerror”参数。像这样生成图像标记：

<img src="something.jpg" onerror="this.src='something_else.jpg'" />

Answer 2

默认情况下加载通用拇指，然后加载特定的拇指 - 如果它不存在，则不会加载：

<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);

});

如何根据图像是否存在更改图像src

2 个答案: