在 Firefox 中检测“图像损坏或截断”

Question

（先发制人：如果您想将此标记为重复，请注意其他问题似乎在问“我为什么会收到此错误？”我知道为什么会收到此错误；我想知道如何检测我的 JavaScript 代码中的错误。它只出现在 Firebug 控制台中，当然，在加载图像时对用户来说是显而易见的。）

我正在使用picturefill 来获取响应式图像。我有一个为图像上的加载事件触发的回调。因此，每当有人调整浏览器窗口的大小以便通过图片填充加载不同的图像时，回调就会运行。

在回调中，我通过画布将图像数据转换为 dataURL，这样我就可以将图像数据缓存在 localStorage 中，这样即使用户离线也可以使用。

注意关于“离线”的部分。这就是我不能依赖浏览器缓存的原因。而且 HTML5 离线应用程序缓存不能满足我的需求，因为图像是响应式的。 （响应式图片与 HTML 离线应用缓存不兼容的解释见"Application Cache is a Douchebag"。）

在 Mac 上的 Firefox 14.0.1 上，如果我将浏览器的大小调整为非常大的大小，然后在大图像有机会完全加载之前再次将其重新调整为较小的大小，则会触发加载图像。它最终在 Firebug 控制台中报告“图像损坏或截断”，但不会引发异常或触发错误事件。没有迹象表明代码中有任何问题。就在 Firebug 控制台中。同时，它将截断的图像存储在 localStorage 中。

如何在 JavaScript 中可靠有效地检测到此问题，以免缓存该图像？

以下是我如何遍历图片填充 div 以查找图片填充已插入的 img 标签：

    var errorLogger = function () {
        window.console.log('Error loading image.');
        this.removeEventListener('load', cacheImage, false);
    };

    for( var i = 0, il = ps.length; i < il; i++ ){
        if( ps[ i ].getAttribute( "data-picture" ) !== null ){

            image = ps[ i ].getElementsByTagName( "img" )[0];
            if (image) {
                if ((imageSrc = image.getAttribute("src")) !== null) {
                    if (imageSrc.substr(0,5) !== "data:") {
                        image.addEventListener("load", cacheImage, false);
                        image.addEventListener('error', errorLogger, false);
                    }
                }
            }
        }
    }

下面是cacheImage() 回调的样子：

var cacheImage = function () {
    var canvas,
        ctx,
        imageSrc;

    imageSrc = this.getAttribute("src");

    if ((pf_index.hasOwnProperty('pf_s_' + imageSrc)) ||
        (imageSrc.substr(0,5) === "data:") ||
        (imageSrc === null) || (imageSrc.length === 0)) {
            return;
    }

    canvas = w.document.createElement("canvas");
    canvas.width = this.width;
    canvas.height = this.height;

    ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0);
    try {
        dataUri = canvas.toDataURL();
    } catch (e) {
        // TODO: Improve error handling here. For now, if canvas.toDataURL()
        //   throws an exception, don't cache the image and move on.
        return;
    }

    // Do not cache if the resulting cache item will take more than 128Kb.
    if (dataUri.length > 131072) {
        return;
    }

    pf_index["pf_s_"+imageSrc] = 1;

    try {
        localStorage.setItem("pf_s_"+imageSrc, dataUri);
        localStorage.setItem("pf_index", JSON.stringify(pf_index));
    } catch (e) {
        // Caching failed. Remove item from index object so next cached item
        //   doesn't wrongly indicate this item was successfully cached.
        delete pf_index["pf_s_"+imageSrc];
    }
};

最后，这里是我在 Firebug 中看到的内容的全文，更改了 URL 以保护有罪者：

图像损坏或截断：http://www.example.com/pf/external/imgs/extralarge.png

Answer 1

似乎在更改img 标签的src 属性时，Firefox 会触发load 事件。这与 HTML5 规范相反，says 认为如果 src 属性发生更改，则应该结束任何其他正在进行的获取（Firefox 会这样做），并且不应发送任何事件。 load 事件应仅在获取成功完成时发送。所以我会说你收到load 事件的事实是一个 Firefox 错误。

但是，图像应该知道它是否完全可用，您可以尝试使用complete 属性：

if (this.complete === false) {
  return;
}

不幸的是，Firefox 将 this.complete 设置为 true，所以这也不是一个选项。

最好的选择可能是每次您希望更改src 属性时创建一个新的<img> 元素。

Answer 2

我自己今天被这个问题弄傻了。一切正常（图像按预期加载），除了错误一直显示在 Firefox 错误控制台中 - 但在 IE 或 Chrome 中没有此类错误。

在我的例子中，我在完整的 jquery 处理程序中将图像插入到带有 innerHtml 的 div 中。当我使用以下命令抢占 jquery 调用时，错误停止了：

var image_holder = new Image();
image_holder.src = img_path;//path of image that's going to be plugged in  

它对我有用，但仍然没有意义。我认为这与时间有关，因为此代码会在图像到达实际将其插入页面的代码之前启动图像加载。