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>

所以基本上'simple-slider'div中的内容将淡入，延迟并淡出到下面的'simple-slider'div。然而，如果这个部分很好，那么一些图像的文件大小非常大，有时它们在滑块淡出之前没有加载。

NB。不是降低文件大小的选项：）

如何让滑块不淡出到下一张图像，直到它已加载。然后，一旦它们全部加载，它就可以循环通过。

我希望这是有道理的。：）

谢谢大家。

Answer 1

imagesLoaded() Plugin非常适合帮助你。

它允许您在一次调用中加载所有图像并使用回调函数然后加载滑块。如果您按照我提供的链接，它将显示插件的完整用法示例。

插入前jQuery预加载

1 个答案: