jQuery：仅在图像存在时插入图像

Posted 2023-02-23

【中文标题】jQuery：仅在图像存在时插入图像

【英文标题】：jQuery: insert image only if it exists

【发布时间】：2012-12-24 05:53:22

【问题描述】：

我正在使用 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，不是吗？

【问题讨论】：

“现有图像”？需要定义。我可以想到两种解释。

【参考方案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 代替，否则你必须将 object 转换为 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

【参考方案2】：

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

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

你必须重置 imageTest

imageTest = [];

【参考方案3】：

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