Question

我正在使用jQuery将图像和blob文本插入到我的文档中，但我只想包含图像（如果它实际存在）（图像路径是变量，img_url，可能或可能不参考现有图像。）

以下是我的代码的简化版本：

var text = data.html,
    image = '<img class="myimage" src="' + img_url + '" />';

var imageTest = $("<img>");
    imageTest.attr('src', img_url).load(function() {
        alert("image exists");
    }).error(function() {
        alert("image doesn't exist");
        imageTest.remove();
    });

if (imageTest.length) {
    $("#content").html(image + text);   
} else {
    $("#content").html(text);
}

虽然我根据图片是否存在获得了正确的提醒，但imageTest.length始终评估为1，因此我仍然将图像始终插入#content ，即使它已经坏了。

我哪里错了？如果图像元素无法加载，imageTest.remove()应该删除它，因此它的长度应为0，不是吗？

Answer 1

你可以这样做

var imageTest = $("<img>");
imageTest.attr('src', img_url).load(function() {
     alert("image exists");
     $("#content").html(image + text); // <-- move it here - if loaded successfully add it
}).error(function() {
     alert("image doesn't exist");
     imageTest.remove(); // <-- don't need this since it's not even in the dom
     $("#content").html(text); // <-- move it here - if failed then just add text
});

虽然我注意到你可能会得到[Object object] ..你可以使用append代替你或者你必须将对象转换为String

var text = "test text";
var imageTest = $("<img>");
imageTest.attr('src', 'http://dummyimage.com/300').load(function () {
  alert("image exists");
  $("#content").empty().append(imageTest).append(text); // <-- move it here - if loaded successfully add it
}).error(function () {
  alert("image doesn't exist");
  imageTest.remove(); // <-- don't need this since it's not even in the dom
  $("#content").html(text); // <-- move it here - if failed then just add text
});

FIDDLE

或者将其转换为字符串

var text = "test text";
var imageTest = $("<img>");
imageTest.attr('src', 'http://dummyimage.com/300').load(function () {
  alert("image exists");
  var img = $('<div/>').append(imageTest.clone()).html(); // get it as a String
  $("#content").html(img + text); // <-- move it here - if loaded successfully add it
}).error(function () {
  alert("image doesn't exist");
  imageTest.remove(); // <-- don't need this since it's not even in the dom
  $("#content").html(text); // <-- move it here - if failed then just add text
});

FIDDLE

Answer 2

根据jquery doumentation，.remove（）只从dom中删除匹配的元素，但对象本身仍然存在。你可以重新连接它

$('#example').append(imageTest);

您必须重置imageTest

imageTest = [];

Answer 3

它始终存在的原因是，如果图像不驻留在服务器上，它将返回404，而404实际上存在。 JQuery无法检测服务器端的内容。您应该使用PHP或您正在使用的任何服务器端语言来检测它是否存在。

jQuery：仅在存在时插入图像

3 个答案: