Question

如果图像是404，图像错误回调是否会触发，但主机还是会返回图像？

我想在客户端确定Youtube缩略图是否有效，然后再将URL提交给服务器。通常，您可以生成缩略图网址，而无需使用格式http://img.youtube.com/vi/**ID**/maxresdefault.jpg

查询其API

有些视频没有高分辨率缩略图，例如，这个： http://img.youtube.com/vi/ty62YzGryU4/maxresdefault.jpg

但是，始终存在质量较低的缩略图： http://img.youtube.com/vi/ty62YzGryU4/default.jpg

理想情况下，我可以检测缩略图是否通过此代码片段加载，在加载有效缩略图时会调用“done”：

var id = "ty62YzGryU4"
var tries = 0
var thumb = "http://img.youtube.com/vi/" + id + "/maxresdefault.jpg"
var img = new Image ()
img.onload = function(){ console.log('ok'); done(id, thumb) }
img.onerror = function(){
    switch (tries++){
        case 0:
            img.src = thumb = "http://img.youtube.com/vi/" + id + "/hqdefault.jpg"
            break;
        case 1:
            img.src = thumb = "http://img.youtube.com/vi/" + id + "/default.jpg"
            break;
        case 2:
            done(id, thumb)
            break;
    }
}
img.src = thumb
if (img.complete) img.onload()

然而事实并非如此 - 当我在控制台中看到404错误时，onload和onerror回调都没有触发，因此永远不会调用done。

如果我设置img.crossOrigin = "Anonymous" onerror回调会触发每个缩略图...因为被控制的跨源资源共享策略。

我也尝试过制作XMLHttpRequest，但无济于事：

xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function() {
    console.log(xmlhttp.readyState)
    console.log(xmlhttp.status)
};
xmlhttp.open('GET', url, true);
xmlhttp.send(null);

我是否设置了X-Requested-With: XMLHttpRequest，readyState从1变为4，但状态始终为零！

有没有办法在不使用API的情况下查看此特定图片是否给出了404？

Answer 1

YouTube缩略图不会触发onerror（）函数，因为YouTube会发送另一个base64 gif图像，该图像会显示分辨率为120X90的空视频图标。（这是解决方案的关键）

请注意，您应该使用maxresdefault图像加载图像标记并将其赋予或（它们）某个类，例如“YouTube的拇指”。

有关信息：maxresdefault 1080，sddefault 720，hqdefault 480，mqdefault 360，默认240。

根据有限的实验，0.jpg是480或视频可用的最佳低分辨率图像。

        $(function()
        {

        $('.youtube-thumb').each(function(ix, it){

            if($(it)[0].naturalHeight <= 90 )
           {
            var path = $(it).attr('src');
            var altpath = path.replace('maxresdefault.jpg','0.jpg');

            $(it).attr('src', altpath);
            }


        });

    });

Answer 2

我知道这个问题有点老了，但今天我遇到了同样的问题，我想给你我的解决方案，该方案尝试将所有YouTube缩略图从最佳到最差。

我对不同选项的“排名”是：

maxresdefault
mqdefault->除1）外只有一个没有黑色边框的
sddefault
hqdefault
默认->有效100％

这是我的代码。

function youtube_check(e) {
    var thumbnail = ["maxresdefault", "mqdefault", "sddefault", "hqdefault", "default"];
    var url = e.attr("src");
    if (e[0].naturalWidth === 120 && e[0].naturalHeight === 90) {
        for (var i = 0, len = thumbnail.length - 1; i < len; i++) {
            if (url.indexOf(thumbnail[i]) > 0) {
                e.attr("src", url.replace(thumbnail[i], thumbnail[i + 1]));
                break;
            }
        }
    }
}

<img onload="youtube_check($(this))" src="https://i3.ytimg.com/vi/---ID---/maxresdefault.jpg">

破碎的Youtube缩略图不会触发错误回调

2 个答案: