12

如果文件位于使用 jQuery/javascript 的不同服务器上，是否可以检查文件是否返回 404 错误？

我正在使用 youtube api 来获取我正在嵌入的视频的高清屏幕截图，但它返回的 JSON 并没有表明视频的高清屏幕截图是否存在。

截图的 url 通常是 http://img.youtube.com/vi/ + video.ID + /maxresdefault.jpg

但是当它不存在时，我会得到这个丑陋的低分辨率灰色 POS：http: //img.youtube.com/vi/MAyTES9gDAU/maxresdefault.jpg

所以，基本上，我想检查屏幕截图是否存在，如果不存在，则应用于display: none保存它的 div。

4

5 回答 5

5

创建一个<img>指向该图像的元素，然后处理该onerror事件并将其隐藏。

于 2012-07-05T02:55:58.210 回答
5

您可以创建一个Image对象并处理onload和onerror。请注意，它仅适用于图像。

function checkExists(imageUrl, callback) {
    var img = new Image();

    img.onerror = function() {
        callback(false);
    };

    img.onload = function() {
        callback(true);
    };

    img.src = imageUrl;
}

像这样使用它：

checkExists(yourVideoUrl, function(exists) {
    if(!exists) {
        // Hide the image
    }
});

这是一个演示。

于 2012-07-05T02:56:26.350 回答
1

minitech 的答案适用于检查 404，但是......

对于 YouTube 案例，他们有自己的处理方式，而不是给你一个 404，他们给你一个“漂亮”的错误图像。

YouTube 有一个 API 可以检查视频 ID 是否有效。查看这篇文章，告诉您如何检查 YouTube 视频 ID 是否存在或是否有效：https ://groups.google.com/forum/?fromgroups=#!topic/youtube-api-gdata/oAztQ3f1tcM

确认视频存在后，您可以尝试加载图像。如果视频不存在，您可以随心所欲地处理这种情况。

于 2013-03-27T17:39:10.003 回答
0

这对我有用（我的在coffeescript中）。

checkImages = ->
  $("img").each ->
    $(this).error ->
      $(this).attr("src", "../default/image.jpg")

$(document).on('page:load', checkImages)

我猜javascript等价物是这样的

function checkImages() {
  $("img").each(function() {
    $(this).error(function() {
      $(this).attr("src", "../default/image.jpg");
    });
  });
};

$(document).on("page:load", checkImages);
于 2014-07-22T20:09:51.730 回答
0

您必须为默认灰度图像添加额外检查：

function checkExists(imageUrl, callback) {
    var img = new Image();

    img.onerror = function() {
        callback(false);
    };

    img.onload = function() {
        //check for a default (grey) image
        if (this.width == 120) {
           callback(false);
        }else {
           callback(true);
        }
    };

    img.src = imageUrl;
}

演示

于 2016-02-26T17:16:57.487 回答