Обнаружение сломанных CSS "background-images" в JavaScript/jQuery

Вот пример для обнаружения сломанных изображений
http://maisonbisson.com/blog/post/12150/detecting-broken-images-in-javascript/

но возможно ли обнаружить разбитое фоновое изображение?
Например:

<div style="background-image:url('http://myimage.de/image.png');"></div>
Источник

2 ответа

Решение

У вас есть контроль над страницей "404 not found" на вашем сервере? В этом случае вы могли бы указать на скрипт, который ищет.jpg/.png/.gif в запрошенном URL-адресе и, соответственно, войти в систему, а затем вывести пользователю страницу 404.

Источник

Я не думаю, что вам нужно иметь jQuery или javascript, чтобы сказать вам, не сломана ли ссылка. Используйте Firebug в Firefox, и он решит большинство ваших проблем:

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
           }
        });
    }
});

Добавьте его на свою страницу после загрузки, и он будет сканировать все элементы div на наличие поврежденных фоновых изображений css. Возможно, есть лучший или более быстрый способ сделать это, но это общая идея.

Редактировать 2: я заметил, когда я тестировал скрипт, что.css('background-image') возвращает строку с "url()", заключающую в себя url изображения. Это привело к сбою вызова ajax на всех URL. Я изменил его и применил Ajax-вызовы только к элементам с фоном CSS. Приведенный выше код теперь работает отлично!:D

Источник
Другие вопросы по тегам