Блог

Главная - Вопросы по программированию - Для прерывания цикла при обнаружении несуществующего изображения

Для прерывания цикла при обнаружении несуществующего изображения

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь загрузить серию изображений внутри div с помощью цикла for, и когда файл не существует, for цикл прерывается. Похоже, этот код не работает.

Я тестировал многие другие, но безуспешно. Какие-нибудь советы?

HTML:

 <div id="project_img">
</div>

JavaScript:

 function load_projects()
  var project_array = new Array();
  var project_name;

  for(var i = 0; i < 7; i  ) {
    project_array.push(new Image());

    project_name = "project_"   i;

    project_array[i].src = "images/"   project_name   ".png";
    project_array[i].id = project_name;

    $("#project_img").append(project_array[i]);

    $("#"   project_name).error(function() {
      alert(i);
      i = 7;
    })
  }
}

$(document).ready(function() {
  load_projects();
});

Комментарии:

1. Я предполагаю, что пропущенное { после function load_projects() — это просто опечатка? В противном случае я не вижу, что сломано, цикл for работает, и я получаю кучу недопустимых изображений: jsfiddle.net/fEQgJ

2. привет, спасибо за ответ, да, цикл for работает, но я пытаюсь остановить цикл for, как только изображение не существует, поэтому я меняю i=7, но цикл не останавливается, он по-прежнему загружает недопустимые изображения: s

Ответ №1:

Проблема в том, что обратные вызовы с ошибками будут вызываться после завершения for цикла (выполняется от 0 до 7).

Если вы хотите начать загрузку следующего изображения, если при загрузке текущего изображения нет ошибок, вам нужно изменить свою стратегию: вам нужен успешный обратный вызов, который начнет загрузку следующего. Метод загрузки jQuerys можно использовать для установки обратного вызова, если изображение было успешно загружено:

 $("...").load(function() { ... });

Если текущее изображение было загружено и не все изображения были отображены, начните загрузку следующего:

 $("#"   project_name).load(function() {
    if (i < 7) {
        load_projects(i   1);
    }
});

Таким for образом, цикл больше не нужен. Полный код:

 var project_array = new Array();

function load_projects(i) {
    project_array.push(new Image());
    project_array[i].id = "project_"   i;
    project_array[i].src = "images/"   project_array[i].id   ".png";

    $("#project_img").append(project_array[i]);

    $("#"   project_array[i].id).load(function() {
        if (i < 7) {
            load_projects(i   1);
        }
    });
}

$(document).ready(function() {
    load_projects(0);
});

Не обязательно, но если вы хотите, вы можете снова добавить обратный вызов ошибки:

     ...
    $("#"   project_array[i].id).error(function() {
        alert('error at '   i);
    });
    ...

Также смотрите Мой jsfiddle. (Там я добавил одно существующее изображение.)

Комментарии:

1. Спасибо! это действительно подробно, почему обратные вызовы ошибок будут выполняться только после завершения цикла for, разве он не вложен в цикл for ??

2. Метод ошибки jQuery добавляет только обратный вызов и продолжается. События будут запускаться извне функции и вызывать обратный вызов только при обнаружении ошибки. (Тогда цикл for уже завершен.)

3. спасибо, я думаю, я понял =) просто снова проверил описание error (), и оно объясняет: «Событие ошибки отправляется элементам, таким как изображения, на которые ссылается документ и загружается браузером»

4. кстати, знаете ли вы об onerror, ссылается ли событие также на document ??

5. Оба являются одним и тем же событием. Без использования jQuery вы можете использовать onerror атрибут для перехвата error-event , с помощью jQuery вы можете использовать error метод.

Ответ №2:

Попробуйте это

 function drawImage(i) {

project_array.push(new Image());

var project_name = "project_"   i;

project_array[i].src = "images/"   project_name   ".png";
project_array[i].id = project_name;

$("#project_img").append(project_array[i]);

$("#"   project_name).load(function() {
   if ( i   1 < 7)
     drawImage(i   1);  
}) ;  
 }

$(document).ready(function() {
  drawImage(0);
});

var project_array = new Array();