Предварительная загрузка jQuery перед вставкой

Question

Я использую пользовательский ползунок jQuery для отображения некоторых изображений и перехода к следующему.

Вот код Jquery:

 (function($){

var simpleslider = function () {

  //     var interval_id = null;

    var feature = {
            holder: null,
            speed: 2000,   // 2 seconds.
            delay: 6000,  // 6 seconds. 
            index: 1,
            total: 0
    };

var fadeFrontFeatures = function(){


            feature.holder = $('#gallery .simple-slider').hide(); //  This gets the DIV with the class slider and hides them initially. 
            feature.total = feature.holder.size();

             interval_id = setInterval(fadeFrontFeatureNext, feature.delay);
             fadeFrontFeatureNext();

    };

     var fadeFrontFeatureNext = function(){

             var previous = feature.holder.eq(feature.index-1);

             if(feature.index == feature.total){ feature.index = 0; }

             var current = feature.holder.eq(feature.index);

             if(previous){ previous.fadeOut(feature.speed); }

             current.fadeIn(feature.speed, function(){
                     feature.index++;
             });

     };

     this.init = function(){

             fadeFrontFeatures();
          //  $("#gallery").mouseenter(function(e){ if (interval_id) { clearInterval(interval_id); interval_id = null; }});
          //  $("#gallery").mouseleave(function(e){ if (!interval_id) { interval_id = setInterval(fadeFrontFeatureNext, feature.delay); }});
     };

     return this;



}();

$(simpleslider.init);
}(window.jQuery));

и вот HTML-код, который он использует:

<div id="gallery">
  <div class="simple-slider">
    <img src="img/testimage.jpg" />
  </div>
</div>

Таким образом, в основном то, что когда-либо находится в div 'simple-slider', будет появляться, задерживаться и исчезать до следующего div 'simple-slider'.Однако, если эта часть велика, некоторые изображения имеют довольно большой размер файла, и иногда они не загружаются до исчезновения слайдера.

примечаниеНе вариант уменьшения размера файла:)

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

Надеюсь, это имеет смысл.:) 1015

Спасибо, ребята.

Answer 1

Плагин imagesLoaded () был бы идеальным, чтобы помочь вам.

Это позволит вам загрузить все изображения за один вызов и использовать функцию обратного вызова для загрузки слайдера. Если вы перейдете по ссылке, которую я предоставил, она покажет вам полный пример использования плагина.