Изображения не загружаются во время выполнения цикла javascript - PullRequest
Новая
       20

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

2 голосов
/ 29 июля 2010

Я пишу предварительный загрузчик изображений для моего проекта html5, и у меня возникла проблема.Изображения, используемые в игре, определяются с помощью графического объекта в JavaScript следующим образом: 

images = new Array();
images[0] = new Image();
images[0].src = '/images/tiles/grass.png';

Как только запускается функция предварительного загрузчика «document.ready», как показано ниже. 

function preLoader(){
    while(loaded != images.length){
        var loaded = 0;
        for(var loadTest = 0; loadTest < images.length; loadTest++){
            if(images[loadTest].complete){
                loaded ++;
            }
        }
        console.log(loaded);
    }
    console.log("loaded all");
}

Проблема в том, что цикл никогда не заканчивается, потому что images [loadTest] .complete всегда возвращает false.Я протестировал запуск функции через несколько секунд после загрузки страницы, когда изображение вызывающе загружено, и оно работает просто отлично.

В связи с этим я предполагаю, что выполнение цикла while препятствует загрузке изображений,Если это правда, как бы я решил эту проблему?

Ответы [ 4 ]

2 голосов
/ 29 июля 2010

В качестве альтернативы событию onload вы можете загрузить изображения или выполнить опрос с помощью вызова setTimeout или setInterval.Это приводит к тому, что код выполняется неблокирующим образом. 

setInterval('checkimages()', 1000)
1 голос
/ 29 июля 2010

В вашем коде есть некоторые ошибки.

  • Большая проблема заключается в том, что вы выполняете опрос в цикле, чего не следует делать в Javascript.Javascript запускается в том же потоке, что и страница, поэтому обработка в Javascript блокирует другие элементы на странице, включая загрузку и взаимодействие с пользователем.В целом также плохая идея проводить опрос без какой-либо задержки, во время которой вы отказываетесь от управления процессором.

    Опрос должен выполняться с использованием setInterval () или setTimeout (), а не цикла.

  • Другая проблема во время вашего цикла, ваша переменная loaded увеличивается каждый раз, когда одно или несколько изображений загружаются при каждом запуске цикла, так что loaded может достичь images.length, а некогда все изображения загружены, но когда хотя бы одно загружено.

1 голос
/ 29 июля 2010

Обработчик, переданный .ready(), гарантированно будет выполнен после построения DOM, но до получения таких активов, как изображения.

Вместо этого вы можете использовать обработчик .load(): 

$(window).load(function () {
  // run code when the page is fully loaded including graphics.
});

Предполагается, что вы используете jQuery.

0 голосов
/ 03 декабря 2010

Вы можете использовать событие Image.onload.Я не очень хорош с Javascript, но что-то вроде этого должно работать и избегать использования таймеров: 

var loadCounter = 0;

function imageLoaded() {
    loadCounter++;
    if(loadCounter == images.length) {
        console.log("images loaded");
    }
}

images = new Array();
images[0] = new Image();
images[0].onload = imageLoaded;
images[0].src = '/images/tiles/grass.png';

По сути, всякий раз, когда изображение загружается, мы увеличиваем счетчик.Если все изображения были загружены, мы регистрируем вывод.

...