Javascript onError 无法正常工作答案

【问题标题】：Javascript onError Not Working CorrectlyJavascript onError 无法正常工作
【发布时间】：2013-12-10 02:04:32
【问题描述】：

我正在尝试控制背景是否可用。我看到 onerror 无处不在，但不适合我。我有 bg 文件夹和 background1.jpg 到 background4.jpg 背景图片。前4个没有问题。但 background5.jpg 在该文件夹中不可用。 Onerror 不起作用。我该如何解决这个问题？有什么想法吗？

    <script>

    var background = document.createElement("img");
    var positive=1;
    var x=0;

    for(var i=0; i<6; i++)
    {
            background.src = "bg/background"+i+".jpg"
            background.onerror = "finisher()"
            background.onload = function(){alert("Worked!");}

    function finisher()
    {
        positive = 0;
    }

    if(positive = 1)
    {

        alert("Vuhhuu! ->"+x);
        x++;
    }
    else
    {
        alert("Image not loaded!");
    }
    }

    </script>

【问题讨论】：

您在页面加载后立即发出警报，无需等待图像加载成功或失败。
我们可以告诉你很多你的代码有问题的地方（到目前为止，我已经在我的回答中概述了几个），但要真正解决你的问题，我们需要知道你实际上是什么试图完成？您是否正在尝试缓慢循环浏览 6 张图像（如幻灯片）？您是否试图找出所有 6 张图片是否都存在？
我正在尝试制作一个类似桌面的网站。这是更改桌面背景的一部分。我不想在文件夹中写 6-7 张图片。

标签： javascript html onerror

【解决方案1】：

您的代码有很多问题。首先，您可以像这样使用for 循环并期望它尝试每个图像：

for (var i=0; i<6; i++) {
        background.src = "bg/background"+i+".jpg"
        background.onerror = "finisher()"
        background.onload = function(){alert("Worked!");}
 }

这不会做你想做的事。这将快速设置每个连续的.src 值，而不会让它们中的任何一个实际加载（异步）以查看它们是否成功。

其次，不要为.onerror 使用字符串。直接赋值函数引用如background.onerror = finisher;

第三，在分配.src 之前，您必须分配 onerror 和 onload 处理程序。如果您的图像在浏览器缓存中并且您的 onload 处理程序尚未安装，则某些浏览器（IE 举手）会立即加载图像，您将错过该事件。

如果您真的想尝试每个图像并知道哪些有效，则必须完全重新设计算法。最简单的方法是创建 6 张图片，加载所有图片，然后在最后一张完成后，您可以查看哪些有错误，哪些加载正确。

如果您只是想找到第一个成功的方法，那么您可以采用不同的方法。请描述您实际想要完成的任务。

要查看有多少图像加载成功，您可以这样做：

function testImages(callback) {
    var imgs = [], img;
    var success = [];
    var loadCnt = 0;
    var errorCnt = 0;
    var numImages = 6;

    function checkDone() {
        if (loadCnt + errorCnt >= numImages) {
            callback(success, loadCnt, errorCnt);
        }
    }

    for (var i = 0; i < 6 i++) {
        img = new Image();

        (function(index) {    
            img.onload = function() {
                ++loadCnt;
                success[index] = true;
                checkDone(this);
            };
        )(i);

        img.onerror = function() {
            ++errorCnt;
            checkDone();
        };

        img.src = "bg/background" + i + ".jpg";
        imgs.push(img);
        success.push(false);
    }
}

testImages(function(successArray, numSuccess, numError) {
    // successArray numSuccess and numError here will tell you 
    // which images and how many loaded
});

请注意，这是一个异步过程，因为图像在后台加载。在所有图像完成后调用回调之前，您不会知道加载了多少图像或加载了哪些图像。

【讨论】：

添加了查看成功加载图片数量的示例代码。
您的代码运行良好。我从没想过会发生这样的事情。感谢您的帮助。

【解决方案2】：

尝试使用try-catch方法。

try{
        background.src = "bg/background"+i+".jpg";
        background.onload = function(){alert("Worked!");}
}catch(e){
   console.log("Error!");
   finisher();
}

【讨论】：

这只是报告分配属性是否失败，不测试加载图像是否成功。

【解决方案3】：

如前所述，您还有一些其他问题，但这是一种更简洁的表达方式，并整理了一些错误。但是，您仍然需要一堆不同的图像。

var background = document.createElement("img");
var positive=1;
var x=0;

background.onerror = function () { 
    positive = 0;
    alert("Image not loaded!");
}
background.onload = function(){
       alert("Vuhhuu! ->"+x);
       x++; 
} 
for(var i=0; i<6; i++)
{
    background.src = "bg/background"+i+".jpg"
}

说明：您不需要在每次循环时绑定 onerror 和 onload 处理程序。做一次就好了。

【讨论】：