檢查是否將其添加爲背景圖像之前的圖像存在

有關於使用上的圖像.error（），以確定是否存在，他們並添加佔位符，如果他們不上堆了幾個解決方案，但他們都討論其使用嚴格依據<img>標籤。有沒有人進行圖像這種類型的驗證未添加到<img>標籤，而是作爲div的背景？檢查是否將其添加爲背景圖像之前的圖像存在

我們有一組從第三方API進來的圖像，並存在以下情況：整個組返回不存在圖像的URL的。驗證一組圖像（註定是背景圖像）以確定它們是否存在，然後在驗證失敗時應用適當的佔位符，會有什麼合適的方法？

2013-02-07 spez86

有幾個方法可以做到這一點：

使用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"); 
}

2013-02-07 15:55:04 lolol

您提供的JS解決方案是完美的。我不能相信我沒想到的新的圖像（）obj的。我把你上面的東西添加到一個函數中。如果有人想引用上面的解決方案，我已經使用上面的方法創建了一個小提琴：http://jsfiddle.net/xHa7r/。感謝您及時的回覆！ – spez86

多麼愉快！ –

不客氣=） – lolol

使用jQuery：$("<img src='[path]'>").load(function(){ [image exists!] });對於具有每個元素的background-image。

我們已經實現的解決方案是創建一箇中介服務器端腳本，用於檢查第三方API是否存在給定圖像 - 如果是，則提供圖像（如果沒有）提供佔位符。通過這種方式，圖像總是被提供+增加了圖像緩存/調整大小的附加功能。

另一種解決方案是，如果圖像存在實際上不檢查 - 你可以提供圖像佔位符使用CSS，如果你通過JavaScript添加背景圖片的話，如果它存在，它會覆蓋現有的規則。

2013-02-07 16:14:40 eithed

回答