Javascript onError 无法正常工作

Question

我正在尝试控制背景是否可用。我看到到处都在使用 onerror，但不适合我。我有 bg 文件夹和 background1.jpg 到 background4.jpg 背景图片。对于前 4 个没有问题。但是 background5.jpg 在该文件夹中不可用。错误不起作用。我该怎么做才能解决这个问题？有什么想法吗？

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

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