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

Question

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

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

Answer 1

有几种方法可以做到：

使用ajax：

$.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");
}

Answer 2

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

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

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