0

我正在使用 jQuery 将图像和文本块插入到我的文档中，但我只想包含实际存在的图像（图像路径是一个变量，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，不是吗？

4

3 回答 3

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

小提琴

或者将其转换为字符串

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

小提琴

于 2013-01-09T22:50:03.110 回答
1

根据 jquery doumentation ， .remove() 仅将匹配的元素从 dom 中删除，但对象本身仍然存在。你可以重新附加它 

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

你必须重置 imageTest 

imageTest = [];
于 2013-01-09T22:52:12.473 回答
-1

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

于 2013-01-09T22:47:22.520 回答