檢測破碎CSS「背景圖片」在JavaScript/jQuery的

下面是一個例子檢測損壞的圖片
http://maisonbisson.com/blog/post/12150/detecting-broken-images-in-javascript/檢測破碎CSS「背景圖片」在JavaScript/jQuery的

，但它能夠檢測破碎的背景圖像？
對於〔實施例：

<div style="background-image:url('http://myimage.de/image.png');"></div>

來源

2012-10-22 Peter

如果您嘗試加載損壞的圖像，您將在Firebug等工具中出現錯誤 – 2012-10-22 09:29:00

我知道，我知道。我嘗試構建一個修復腳本。如果用戶使用損壞的圖像打開頁面 - >將pageUrl（或發佈ID）插入到特殊的mySql-DB中。 – Peter

您是否可以控制服務器上的「404未找到」頁面？在這種情況下，您可以將它指向在請求的URL中查找.jpg/.png/.gif的腳本並進行相應的日誌記錄，然後輸出404頁面給用戶。

來源

2012-10-22 13:39:55 Jan

@不，我只有普通的Webspace（1und1）：/ – Peter

你確定嗎？ http://www.google.se/#q=%221und1%22+eigene+404 – Jan

我不認爲你需要擁有jQuery的或JavaScript來告訴你一個鏈接是否損壞。使用Firefox中的Firebug，這將挑選出你的大部分問題：

https://addons.mozilla.org/en-us/firefox/addon/firebug/

編輯： 現在我知道，這是一個自動修復，我趕緊看了一眼，並想出了與此：

var imageURLs = $('div'); 
imageURLs.each(function(index, element){ 
    var imageURL = $(element).css('background-image').replace('url("', '').replace('")', ''); 
    if (imageURL != "none"){ 
     $.ajax({ 
      url: imageURL, 
      type: 'HEAD', 
      error: function(){ 
       //error handling for broken image url 
      } 
     }); 
    } 
});

是添加到您的網頁已加載後，它會掃描任何破CSS背景圖像的所有div元素。可能有更好或更快的方法來做到這一點，但這是一般的想法。

編輯2：我注意到當我測試腳本.css（'background-image'）返回一個字符串「url（）」包含圖像的URL。這導致所有url上的ajax調用失敗。我改變了它，並且只對具有CSS背景的元素執行了ajax調用。上面的代碼現在完美了！：D

來源

2012-10-22 09:32:12 WizzHead

我認爲OP正在尋找一個腳本解決方案來自動執行後續行動。 – Jeroen

http://jsfiddle.net/PbNfX/ < - 沒有工作？ ...奇怪的OO – Peter

我不知道爲什麼jsfiddle說，即使正確的背景圖像有錯誤。但我測試了它在我的服務器上，它工作正常。在Firebug中，jsfiddle說這個請求沒問題，但仍然有錯誤。它只能與他們的API有關。請嘗試在您的網站上。 – WizzHead

檢測破碎CSS「背景圖片」在JavaScript/jQuery的

回答

相關問題