检测在Firefox“的形象损坏或截断”(Detect “image corrupt or trun

（先发制人：如果你很想这个标记为重复，注意其他问题似乎问我知道为什么我得到这个错误，我想知道我是怎么“为什么我得到这个错误？”可以检测到错误在我的JavaScript代码，只出现在Firebug的控制台，当然，是有目共睹的图像时加载的用户。）

我使用picturefill为响应图像。我有一个是对图像中的负载触发的事件的回调。所以回调运行，每有人重新调整浏览器窗口，使得不同的图像通过picturefill加载时间。

在回调中，我的图像数据通过画布转换为dataURL，这样我可以缓存在localStorage的图像数据，以便其提供给即使他们是脱机用户。

请注意有关“脱机”的部分。 这就是为什么我不能依靠浏览器的缓存。 而HTML5离线应用程序缓存不符合我的需求，因为图像响应。（请参见“应用程序缓存是Douchebag”与HTML离线应用程序缓存响应图像的不兼容的说明。）

在Mac上的Firefox 14.0.1，负载图像会火，如果我调整浏览器的东西非常大，然后调整其回落到大图像之前再次东西小有机会完全加载。它结束了在Firebug控制台报告“图像损坏或截断”，但不抛出异常或触发一个错误事件。没有迹象显示任何错误代码。就在Firebug控制台。同时，存储在localStorage的截断的图像。

我怎么能可靠，高效地在JavaScript中检测到这个问题，所以我不缓存这些图像？

下面是我遍历picturefill的div如何找到已插入由picturefill的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:

看来，改变当src的属性img标记，火狐触发一个load事件。这是违背了HTML5规范，它说，如果src属性被改变，那么任何其他已经获取正在进行应该结束（这Firefox没有），任何事件应该被发送。该load只有在获取成功完成事件应该被发送。所以，我想说的是，你得到一个事实load事件是一个Firefox的错误。

然而，图像应该知道这是否是完全可用，你可以尝试使用complete属性：

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

不幸的是，Firefox已经this.complete设置为true ，而不是，所以，要么是不是一种选择。

最好的办法可能是创建一个新<img>每次你想改变的时间元素src属性。

Answer 2:

今天我就傻眼了这个问题我自己。虽然在IE或Chrome没有这样的错误 - 一切都只是错误显示保持在Firefox错误控制台了工作的罚款（视加载预期图像）。

在我来说，我是在完整的jQuery处理程序插入的图像与innerHTML的一个div在。当我抢占了jQuery调用带有错误停止：

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

它为我工作，但它仍然是没有意义的。我认为这件事情做定时，这个代码启动加载它到达，实际上它插入到页面的代码之前的图像。