jQuery: перехват ошибки загрузки изображения 404, это можно сделать? - PullRequest
Новая
       5

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

7 голосов
/ 06 декабря 2010

Я в основном перебираю кучу URL-адресов видео на YouTube, чтобы получить код id каждого видео.

Затем я повторяю все «миниатюрные» изображения в списке и заменяю источник видео на YouTube.thumbnail url.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что если видео было удалено с YouTube, результирующий источник изображения не будет возвращать действующий URL-адрес изображения, однако замена по-прежнему запускается, поэтому URL-адрес поврежденного изображенияпомещен в список.

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

Вот мой код, который циклически повторяется надyoutube отсекает страницу и фильтрует их идентификаторы: 

function generateYoutubeThumbnails() {
    var YTT = {};
    YTT.videos = $('.video-thumbnail'); // the placeholder thumbnail image

    YTT.videos.each(function(i) {
        YTT.url = $(this).attr('data-videourl'); // the youtube full url, eg: http://www.youtube.com/watch?v=F52dx9Z0L5k
        YTT.videoId = YTT.url.replace(/(.+?)watch\?v=/gi,'').replace(/\&(.+)$/gi,''); // find and replace to get just the id: eg: F52dx9Z0L5k

        YTT.snip = 'http://img.youtube.com/vi/'+ YTT.videoId +'/hqdefault.jpg'; // the thumbnail url which would return: http://img.youtube.com/vi/F52dx9Z0L5k/hqdefault.jpg in this case.

        $(this).attr('src', YTT.snip); // replace the placeholder thumbnail with the proper youtube thumbnail that we got above
    });
}
generateYoutubeThumbnails();

Любые идеи о том, как я могу остановить поиск и замену последнего шага, если результирующий URL не работает?

1 Ответ

16 голосов
/ 06 декабря 2010

JQuery 

$('img').bind('error', function() {
   alert('image did not load');
});

jsFiddle .

без jQuery 

Array.forEach(document.getElementsByTagName('img'), function(img) {
    img.addEventListener('error', function() {
        this.style.border = '5px solid red';
    }, false);
});

jsFiddle .

В примере без jQuery используются некоторые методы, недоступные в более старых IE. Вы можете шим этими методами или использовать более совместимые методы.

...