Javascript onError Не работает правильно

Question

Я пытаюсь контролировать фон, если он доступен или нет. Я вижу, что он использует везде, но не для меня. У меня есть папка 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;

В-третьих, вы ДОЛЖНЫ назначать обработчики onerror и onload, прежде чем вы назначаете .src. Некоторые браузеры (IE поднимают вашу руку) сразу загружают изображение, если ваше изображение находится в кеше браузера, и если ваш обработчик onload НЕ установлен, вы просто пропустите это событие.

---

Если вы действительно пытаетесь попробовать каждое изображение и знаете, какие из них работают, вам придется полностью перепроектировать алгоритм. Простым способом было бы создать 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 при каждом цикле. Делать это один раз будет просто отлично.