jQuery:捕获图像加载事件错误404，可以完成吗? [英] jQuery: Catching an image load event error 404, can it be done?

问题描述

我基本上是遍历一堆youtube视频网址，以获取每个视频的id代码.

然后我重申列表中的所有缩略图"图像，并将源替换为youtube视频缩略图网址.

我当前遇到的问题是，如果视频已从youtube上删除，则生成的图像源将不会返回有效的图像网址，但是替换仍会触发，因此将损坏的图像网址放入列表中. /p>

在用缩略图源替换初始图像源之前，如何让jQuery来检测url是否实际上仍在工作?

这是我的代码，它遍历页面上的youtube剪辑并过滤其ID:

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不起作用，如何停止查找和替换最后一步?

解决方案

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中不可用的一些方法.您可以 shim 这些方法，也可以使用更多兼容的技术.

I'm basically looping over a bunch of youtube video url's to get each video's id code.

I then reiterate over all 'thumbnail' images in a list and replace the source with the youtube video thumbnail url.

The problem I am currently running into is that if the video has been removed from youtube the resulting image source will not return a functioning image url, however the replace is still firing thus a broken image url is placed into the list.

How can I get jQuery to detect whether the url is actually still working before replacing the initial image source with the thumbnail source?

Here is my code that loops over the youtube clips on the page and filters their IDs:

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

Any ideas on how I can stop the find and replace of the last step if the resulting url is not working?

解决方案

jQuery

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

jsFiddle.

Without jQuery

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

jsFiddle.

The without jQuery example uses some methods not available in older IEs. You can shim these methods or use more compatible techniques.

这篇关于jQuery:捕获图像加载事件错误404，可以完成吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！