15

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

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

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

注意关于“离线”的部分。这就是为什么我不能依赖浏览器缓存。而且 HTML5 离线应用程序缓存不能满足我的需求，因为图像是响应式的。（有关响应式图像与 HTML 离线应用程序缓存不兼容的解释，请参阅“应用程序缓存是一个混蛋”。）

在 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

4

2 回答 2

9

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

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

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

不幸的是，Firefox 已改为this.complete设置true，因此这也不是一个选项。

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

于 2012-08-17T09:29:31.290 回答
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

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

于 2013-05-25T00:18:15.410 回答