jQuery image preload order

Question

У меня возникли проблемы, адаптирующие сценарий предварительной загрузки изображения jQuery только в одном аспекте: я не могу понять, как обеспечить, чтобы мои изображения загружались/отображались в порядке моего массива изображений.

В настоящий момент каждый раз, когда я загружаю страницу, изображения отображаются в другом порядке. (Все, кроме заказа изображения, отлично работает alreday.)

Может ли кто-нибудь помочь мне исправить это?

Соответствующий код:

(function($) { 
     var imgList = []; 
     $.extend({ 
      preload: function(imgArr, option) { 
       var setting = $.extend({ 
        init: function(loaded, total) {}, 
        loaded: function(img, loaded, total, bild) {}, 
        loaded_all: function(loaded, total) {} 
       }, option); 
       var total = imgArr.length; 
       var loaded = 0; 

       setting.init(0, total); 
       for (var i = 0; i < total; i++) { 
        imgList[i] = ($("<img />") 
         .attr("src", imgArr[i]) 
         .load(function() { 
          loaded++; 
          setting.loaded(this, loaded, total, this.src); 
          if(loaded == total) { 
           setting.loaded_all(loaded, total); 
          } 
         }) 
        ); 
       } 
      } 
     }); 
    })(jQuery); 

    $(document).ready(function() { 
     $(function() { 
      $.preload([ 
       "image1.jpg", 
       "image2.jpg", 
       "image3.jpg" 
      ], { 
       init: function(loaded, total) { 
        var z = 0; 
        while (z < total) { 
         z++; 
         $("section nav").append('<img id="e'+z+'" src="all/blank.png" alt=""/>'); 
        } 
       }, 
       loaded: function(img, loaded, total, bild) { 
        $("#e"+loaded).prop("src",bild); 
       }, 
       loaded_all: function(loaded, total) { 
        //all done! 
       } 
      }); 
     }); 
    }); 

Update:

В конце концов я решил его с совершенно другим, более коротким сценарием я написал с нуля. Он начинает добавлять столько же (очень маленькие) фиктивные изображения в качестве заполнителей в моем контейнере изображения, как массив содержит реальные изображения и загружает каждое изображение только после того, как предыдущий: совершилось

imgs = new Array("number1.png","number2.png","number3.png"); 

for (i=0; i<imgs.length; i++) { 
    $("section nav").append('<img id="e'+i+'" src="blank.png" alt=""/>'); 
} 

fin(0); 

function fin (n) { 
    $('#e'+n).attr('onload', 'fin('+n+')'); 
    $("#e"+n).attr("src", imgs[n]).load(function() { 
    fin ((n+1)); 
    }); 
} 

Answer 1

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

Вы на самом деле хотите, чтобы заказать на var i:

for (var i = 0; i < total; i++) { 
    imgList[i] = ($("<img />") 
     .attr("src", imgArr[i]) 
     .load(function() { 
      loaded++; 
      setting.loaded(this, i, total, this.src); // i instead of loaded 
      if(loaded == total) { 
       setting.loaded_all(loaded, total); 
      } 
     }) 
    ); 
} 

Но это не будет работать, так как i будет такой же, как total в то время, когда изображение загружается, так что все изображения будут идти в положение total. Не то, что вы хотите!

Так что нам нужно, чтобы обернуть его в себя вызывающей анонимную функцию, чтобы получить доступ к правильному значению i:

for (var i = 0; i < total; i++) { 

    // wrap in function to get access to the right i 

    (function(img) { 
     imgList[img] = ($("<img />") 
      .attr("src", imgArr[img]) 
      .load(function() { 
       loaded++; 
       setting.loaded(this, img, total, this.src); // img instead of i 
       if(loaded == total) { 
        setting.loaded_all(loaded, total); 
       } 
      }) 
     ); 
    })(i); 
} 

Замените ваш цикл с этим, и он должен работать.

Answer 2

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

Браузер, как правило, загружает несколько изображений в параллель, чтобы оптимизировать пропускную способность. Объедините это с непредсказуемой скоростью загрузки и различными размерами файлов, и файлы будут выполнены практически в любом порядке.

Если это визуальный эффект, который вы хотите, вы должны решить это отдельно.

Answer 3

Обратный вызов loaded никогда не будет вызван в порядке, так как изображения загружаются асинхронно. Однако вместо этого вы должны изменить loaded_all, чтобы передать исходный массив. Таким образом, ваш обработчик может обрабатывать изображения по порядку.

if(loaded == total) { 
    setting.loaded_all(imgArray); 
}