相关疑难解决方法(0)

(先发制人的罢工:如果你想把它标记为副本,请注意其他问题似乎在问"为什么我会收到这个错误？"我知道为什么我会收到这个错误;我想知道我是怎么回事可以检测我的JavaScript代码中的错误.它只出现在Firebug控制台中,当然,在加载图像时对用户来说是显而易见的.)

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

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

请注意关于"离线"的部分.这就是为什么我不能依赖浏览器缓存.HTML5离线应用程序缓存无法满足我的需求,因为图像是响应式的.(有关响应图像与HTML脱机应用程序缓存不兼容的说明,请参阅"应用程序缓存是一个Douchebag".)

在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);
                    }
                }
            } …

我正在寻找如何检测图像数据被截断\损坏.例如这张图片:

数据图像不完整(它在IE上更有形,并且在firefox控制台中标注为警告),但是img.onerror没有被触发,而img.completed是真的.

演示:https://jsfiddle.net/7dd0ybb4/

var img = document.getElementById('MyPicture');

img.onerror = () => alert('error img');  
img.onload = () =>  console.log(img.complete); //true

img.src = "https://i.stack.imgur.com/nGkok.jpg";

我想要一种方法来了解这一点.如果图像有无效数据.