如何检查状态图像javascript加载答案

【问题标题】：How to check status image javascript load如何检查状态图像javascript加载
【发布时间】：2012-07-12 20:15:48
【问题描述】：

我正在做一个新项目，我正在从不同的网站拍照。

问题是当我拍照时，有时会出现 404 错误状态。如果链接损坏，这不是一个真正的问题，因为我从 DOM 中删除了这些图像，但某些网站用默认图像替换了损坏的图像（如：http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg:large）

我的日志中唯一的信息是这样的错误：加载资源失败：服务器响应状态为 404（未找到）。

这里有没有人可以帮我解决？

有我的检测损坏图像的代码：

$('img').error(function(){
    $(this).hide().parents('a').parents('li').remove();
});

提前致谢！

【问题讨论】：

首先——你可以用$(this).hide().parents('li').remove();代替line（parents在树上冒泡），然后——我是否正确理解了这个问题：你不仅要删除404状态图片，甚至“默认图片”？
是的，这是正确的。它适用于损坏的图像，但不适用于默认图像（想法是在幻灯片中显示这些图像，我们不希望幻灯片中有默认图像。）。感谢父母，忘记了。
提供的图片示例也回复HTTP/1.1 404 Not Found。这是正确的还是只是巧合？我只是想弄清楚——我们必须像@Fresheyeball 建议的那样收集所有这些虚拟图像，还是只过滤掉 404？
没错！这是为了向您展示“默认图像”，它们是由与原始图像相同的设置制成的。只需过滤 404。我想将它们从我的 DOM 中删除。
有进展吗？也许我们可以帮助你？谢谢！

标签： jquery ajax image status

【解决方案1】：

这真的很难。这是我能想到的最佳解决方案。

第一步：从各种图像源下载您将遇到的所有 404 替换图像。将这些图片转换为base64字符串，并将这些字符串存储在js中的数组中。

第二步：使用虚拟画布标签将下载的图片转换为base64字符串：How to convert image into base64 string using javascript

第三步：遍历404图像base64数组，测试下载图像的base64字符串是否匹配数组中的任何一个。如果它与 jQuery 图像上的触发器“错误”匹配，则可以重用现有的 .error 脚本。

【讨论】：

我想这样做，但问题是替换图像是使用原始图像的设置制作的，因此每个替换图像都是不同的，有时你有一个 83x83 的 10 字节数据，有时是 1000x1000 1 兆字节数据。我无法检查图像是否匹配，因为它们对于每个错误都是不同的。这是一场真正的噩梦！解决方案是下载所有分辨率的图像，但需要一段时间才能查看字符串是否匹配！
您可以模糊（样本和新下载的）图像并从几个节点构建散列。再加上在这种情况下样本图像的哈希值只计算一次。
@fedosov 虽然我不知道该怎么做。这听起来是个很棒的主意。你能提供一个链接来说明你将如何去做吗？
@Simon 如果您可以选择设置一个可以捕获 404 的代理，我会强烈支持 fedosov 的回答。

【解决方案2】：

对于您的问题，有更简单（与提供的相比）的解决方案，但它需要一些服务器端代码（最后解释）。因此，JS 将如下所示：

$("img").each(function()
{
    // Check each target image and try to resolve its src
    $.ajax(
    {
        url: $(this)[0].src,
        type: "get",
        context: $(this),
        error: function()
        {
            // Delete on error (404)
            $(this).remove();
            console.log("ERR!");
        },
        success: function(data)
        {
            // It's OK!
            console.log("YEAH!");
        }
    });
});

由于不允许跨域请求，您需要编写简单的代理脚本，将图像内容传递到您的服务器。

例如：yoursite.com/imageproxy?src=http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg:large 返回带有原始标题的http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg:large 图像的内容。

更新：

作为对@Fresheyeball 答案的评论的说明：

更新 2：

另外，我认为您可以尝试使用brain.js 来训练神经网络，这可以帮助您稍后与颜色进行比较。但是……

也许为图像编写 4 字符串代理更容易（当然，如果有无限带宽的话）。

【讨论】：

404替换图片不会还是触发成功吗？
是的。这就是$.ajax 调用的重点——不管图像上的什么，它都会在 404 上触发错误。
我的意思是，对于替换图像，服务器不会返回 404，它会返回替换图像，就好像它是正确的图像一样。
但是调试控制台有404错误，对吧？ curl -I http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg:large 显示 HTTP/1.1 404 Not Found
无论如何，如果值得的话，我们可以开发一个关于神经网络和颜色采样的主题。