Javascript - ждать загрузки изображений

<code>var l = false;
var l2 = false;

var imm = new Image();
imm.src = "b.png";

imm.onload = function(){
l = true;
}

var imm2 = new Image();
imm2.src = "c.png";

imm2.onload = function(){
l2 = true;
}
</code>

Как я могу сказать этот JavaScript для запуска функции, только еслиl а такжеl2 правда? Должен ли я установить цикл, который постоянно проверяет эти две переменные? Есть ли более эффективный способ? Я не хочу, чтобы мой сценарий запускался без изображений, но с.onload Я могу дождаться загрузки только одного изображения, а не всех. Спасибо за вашу помощь!

Ответы на вопрос(6)

Если это всего 2 раза на протяжении всего сценария,l а такжеl2 установлены, то вы можете проверить после установки значений.

var l = false;
var l2 = false;

var imm = new Image();
imm.src = "b.png";

imm.onload = function(){
  l = true;
  if (l && l2) {
    myFunc();
  }
}

var imm2 = new Image();
imm2.src = "c.png";

imm2.onload = function(){
  l2 = true;
  if (l && l2) {
    myFunc();
  }
}

function myFunc(){
  //do stuff
}
 11 апр. 2012 г., 12:46
Сегодня вечером я усваиваю урок: быстрый ответ на основе копирования / вставки не часто бывает успешным на iPad.

Вот общий (works with any number images)

function preload( images, callback){
   var imageElements = [],
       counter = images.length,
       lfunc = function(){if (--counter === 0 && callback) callback(imageElements);};

   // first create the images and apply the onload method
   for (var i = 0, len = images.length; i < len; i++){
      var img = new Image();
      imageElements.push( img );
      img.onload = lfunc;
      img.src = images[i];
   }
}

function codeOncePreloadCompletes(preloadedImages){
  // Do whatever you want here
  // images are preloaded
  // you have access to the preloaded image if you need them
  // with the preloadedImages argument
}

// USAGE

preload( ['b.png', 'c.png'], codeOncePreloadCompletes);

// OR

preload( ['b.png', 'c.png'], function(preloadImages){
   // write directly here what to do after preload
});
 11 апр. 2012 г., 12:52
Великие умы думают одинаково! Аккуратный трюк с обратным вызовом, хотя. :)

вам не нужно постоянно проверять, просто проверяйте другое каждый раз, когда завершается один, таким образом, когда вторая будет выполнена, ваша функция сработает, и вам останется только "проверить" один раз.     var l = false;     var l2 = false;

var imm = new Image();
imm.src = "b.png";

imm.onload = function(){
l = true;

if (l2)
   call yourFunction();

}

var imm2 = new Image();
imm2.src = "c.png";

imm2.onload = function(){
l2 = true;

if (l)
   call yourFunction();
}

Более элегантный способ на мой взгляд:

var loadedImagesCount = 0;
var imageNames = ["b.png", "c.png"];
var imagesArray = [];
for (var i = 0; i < imageNames.length; i++) {
    var image = new Image();
    image.src = imageNames[i];
    image.onload = function(){
        loadedImagesCount++;
        if (loadedImagesCount >= imageNames.length) {
            //loaded all pictures
        }
    }
    imagesArray.push(image);
}

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

 11 апр. 2012 г., 12:51
+1 за хороший подход.

Если вы хотите загружать изображения по порядку, из заданного списка URL-адресов, я считаю это полезным:

preloadImages_helper("firstURL", "secondURL");

    function preloadImages_helper(){
        var args =  Array.prototype.slice.call(arguments);
        if(!(args === undefined) && args.length > 0){
            var img = new Image();
            img.src = arguments[0];
            img.onload = function(){
                preloadedImages.push(img);
                console.log("pushing image");
                //Don't forget to call user code!
                if(!(args === undefined) && args.length > 1){
                    args.shift();
                    preloadImages_helper.apply(this, args);
                }
                else{
                    console.log("finished loading images");
                    userCode();
                }
            };
        }
    }
Решение Вопроса

Нет необходимости в петлях. Вы можете позволить им вызывать функцию, которая проверяет, истинны ли l и l2, и выполняет то, что вы хотите сделать:

var onLoaded = function() {
    if (l && l2) {
        // do your stuff
    }
}

imm.onload = function(){
    l = true;
    onLoaded(); // call to onLoaded
}

imm2.onload = function(){
    l2 = true;
    onLoaded(); // call to onLoaded
}

Это в основном более простая формаШаблон наблюдателя, Есть плагины JQuery, такие какRadio.js что инкапсулирует это для вас.

Ваш ответ на вопрос