Как установить изображение ошибки для всех изображений на странице?

Question

Как установить изображение ошибки для всех изображений на странице?

0

Я хотел бы показать свое собственное изображение ошибки, когда изображение не может успешно загрузиться.

Я думал о функции JavaScript:

<script type="text/javascript">
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
    images[i].onerror = onErrorImage(images[i]);
}       
function onErrorImage(element){
    element.onerror = null;
    element.src = 'errorImage.png';
}
</script>

Но это не работает. Это превращает каждое изображение на страницу в мое собственное изображение ошибки.

Есть ли еще один простой способ показать мое собственное изображение ошибки при ошибке?

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

Решение может быть в jQuery.

Liontack Lightning 30 апр. 2014, в 15:16

Источник

1

Разве вы не должны ждать, пока DOM подготовится?
mehulmpt 30 апр. 2014, в 13:02
0

возможный дубликат jQuery / Javascript для замены испорченных изображений
Jay Blanchard 30 апр. 2014, в 13:05
0

@JayBlanchard, этот вопрос имеет на каждом img в html ошибку. Я хотел бы избежать этого.
Liontack Lightning 30 апр. 2014, в 13:11
0

@BrokenHeart BrokenHeart, я получаю только изображения, зачем мне проверять снова?
Liontack Lightning 30 апр. 2014, в 13:11

Показать ещё 2 комментария

Теги:

javascript

jquery

2 ответа

0

Есть много способов сделать это, я покажу вам одну из них:

Вы можете сделать все свои изображения с помощью "fake-src" и загрузить их, когда документ будет готов. Конечно, вы можете сделать загрузчик, пока он не загрузится. Вот функция, которую я пишу для вас:

    imagesReady = function () {
    var myImgs = document.getElementsByTagName("img");
    for (var i = 0; i < myImgs.length; i++) {
        getImageReady(myImgs[i]);
    };
    function getImageReady(el) {
        var url = el.getAttribute("src-fake");
        var image =  document.createElement("img"); 
        image.onload = function() {
            el.src = url;
            el.style.opacity = 1;
            //this image is ok, that why we put his src to be the fake src
        };
        image.onerror = function (err) {
            console.log("err on load :"+image.src);
            el.src = url;
            //this image fail!
        }
        image.src = url;
    }
}
imagesReady();

Tsoko 30 апр. 2014, в 11:01

Ещё вопросы

Разве вы не должны ждать, пока DOM подготовится?
возможный дубликат jQuery / Javascript для замены испорченных изображений
@JayBlanchard, этот вопрос имеет на каждом img в html ошибку. Я хотел бы избежать этого.
@BrokenHeart BrokenHeart, я получаю только изображения, зачем мне проверять снова?

A. Wolff · Accepted Answer · 2014-04-30T10-23-00.000Z

Должно быть, я думаю:

images[i].onerror = function(){onErrorImage(this);}

Это решило это, на удивление, спасибо А. Вольфу.