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處理程序。 這樣做一次就可以了。