Javascript onError无法正常工作

Question

我正在尝试控制背景是否可用。 我看到到处都在使用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>

Answer 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
});

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

Answer 2

尝试使用try-catch方法。

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

Answer 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处理程序。 这样做一次就可以了。