JQuery / JavaScript, чтобы заменить сломанные изображения

Question

У меня есть веб-страница, которая включает в себя несколько изображений. Иногда изображение недоступно, поэтому поврежденное изображение отображается в браузере клиента.

Как мне использовать jQuery, чтобы получить набор изображений, отфильтровать его до поврежденных изображений и заменить src?

<Ч />

- Я думал, что будет проще сделать это с jQuery, но оказалось гораздо проще просто использовать чистое решение JavaScript, то есть то, которое предоставляет Prestaul.

Answer 1

Обработайте событие onError для изображения, чтобы переназначить его источник, используя JavaScript:

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="imgError(this);"/>

Или без функции JavaScript:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

В следующей таблице совместимости перечислены браузеры, которые поддерживают функцию ошибки:

http://www.quirksmode.org/dom/events/error.html

Answer 2

Я использую встроенный обработчик error:

$("img").error(function () {
  $(this).unbind("error").attr("src", "broken.gif");
});

Редактировать: Метод error() устарел в 1,8 и выше. Вместо этого вы должны использовать .on("error") вместо:

$("img").one("error", function () {
  $(this).attr("src", "broken.gif");
});

Answer 3

Если кто-то вроде меня попытается присоединить событие error к динамическому тегу HTML img, я хотел бы отметить, что здесь есть одна загвоздка:

Видимо img события ошибок не всплывают в большинстве браузеров, в отличие от того, что говорит стандарт .

Итак, что-то вроде следующего будет не работать :

$(document).on('error', 'img', function () { ... })

Надеюсь, это будет полезно кому-то еще. Я хотел бы видеть это здесь, в этой теме. Но я не сделал. Итак, я добавляю это

Answer 4

Вот отдельное решение:

$(window).load(function() {
  $('img').each(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
      // image was broken, replace with your new image
      this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
    }
  });
});

Answer 5

Я считаю, что это то, что вам нужно: jQuery.Preload

Вот пример кода из демо, вы указываете загрузку и не найдены изображения, и все готово:

$('#images img').preload({
    placeholder:'placeholder.jpg',
    notFound:'notfound.jpg'
});

Answer 6

$(window).bind('load', function() {
$('img').each(function() {
    if((typeof this.naturalWidth != "undefined" &&
        this.naturalWidth == 0 ) 
        || this.readyState == 'uninitialized' ) {
        $(this).attr('src', 'missing.jpg');
    }
}); })

Источник: http://www.developria.com/2009/03/jquery-quickie---broken-images.html

Answer 7

Вот быстрый и грязный способ заменить все испорченные изображения, и нет необходимости менять HTML-код;)

пример кодекса

    $("img").each(function(){
        var img = $(this);
        var image = new Image();
        image.src = $(img).attr("src");
        var no_image = "https://dummyimage.com/100x100/7080b5/000000&text=No+image";
        if (image.naturalWidth == 0 || image.readyState == 'uninitialized'){
            $(img).unbind("error").attr("src", no_image).css({
                height: $(img).css("height"),
                width: $(img).css("width"),
            });
        }
  });

Answer 8

Пока ОП искал замену SRC, я уверен, что многие люди, задававшие этот вопрос, возможно, захотят скрыть только испорченное изображение, и в этом случае это простое решение отлично сработало для меня:

<img src="someimage.jpg" onerror="this.style.display='none';" />

Answer 9

Это дерьмовая техника, но она в значительной степени гарантирована:

<img ...  onerror="this.parentNode.removeChild(this);">

Answer 10

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

Я ограничил его до 10 попыток, как будто он не загружен, тогда изображение может отсутствовать на сервере, и функция будет входить в бесконечный цикл. Я все еще проверяю все же. Не стесняйтесь настраивать это:)

var retries = 0;
$.imgReload = function() {
    var loaded = 1;

    $("img").each(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {

            var src = $(this).attr("src");
            var date = new Date();
            $(this).attr("src", src + "?v=" + date.getTime()); //slightly change url to prevent loading from cache
            loaded =0;
        }
    });

    retries +=1;
    if (retries < 10) { // If after 10 retries error images are not fixed maybe because they
                        // are not present on server, the recursion will break the loop
        if (loaded == 0) {
            setTimeout('$.imgReload()',4000); // I think 4 seconds is enough to load a small image (<50k) from a slow server
        }
        // All images have been loaded
        else {
            // alert("images loaded");
        }
    }
    // If error images cannot be loaded  after 10 retries
    else {
        // alert("recursion exceeded");
    }
}

jQuery(document).ready(function() {
    setTimeout('$.imgReload()',5000);
});