Question

我正试图控制背景是否可用。我看到在任何地方使用恐怖，但不适合我。我有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处理程序。做一次就行了。

Javascript onError无法正常工作

3 个答案: