jquery - 在将图像添加为背景图像之前检查图像是否存在

Question

堆栈上有一些解决方案关于在图像上使用 .error() 来确定它们是否存在，如果不存在则添加占位符，但它们都严格讨论了它在<img>标签上的使用。<img>有没有人对没有添加到标签而是作为 div 上的背景的图像执行这种类型的验证？

我们有一组来自第 3 方 API 的图像，并且在某些情况下，返回的整组图像 url 不存在。验证一组图像（注定是背景图像）以确定它们是否存在并在验证失败时应用适当的占位符的正确方法是什么？

score 25 · Accepted Answer

有几种方法可以做到这一点：

使用阿贾克斯：

$.ajax({
    url: "image.jpg",
    type: "HEAD",
    error: function () { alert("no image"); }
});

使用 javascript 图像对象：

var image = new Image(); 
image.src = "image.jpg";
if (image.width == 0) {
  alert("no image");
}

score 1 · Accepted Answer

使用 jquery：$("<img src='[path]'>").load(function(){ [image exists!] });对于每个具有background-image.

我们实施的一个解决方案是创建一个中间的服务器端脚本，用于检查给定图像是否存在于第 3 方 API 端 - 如果存在，则提供图像，如果不存在 - 提供占位符。这种方式始终提供图像+添加缓存/调整图像大小的附加功能。

另一个解决方案是实际上不检查图像是否存在 - 您可以使用 CSS 提供占位符图像，如果您通过 javascript 添加背景图像，那么如果它存在，它将覆盖现有规则。

2 回答 2