首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >插入前的jQuery预加载

插入前的jQuery预加载
EN

Stack Overflow用户
提问于 2012-03-23 09:07:21
回答 1查看 292关注 0票数 0

我正在使用一个自定义的jQuery滑块来显示一些图像并淡出到下一个图像。

下面是Jquery代码:

代码语言:javascript
运行
复制
 (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:

代码语言:javascript
运行
复制
<div id="gallery">
  <div class="simple-slider">
    <img src="img/testimage.jpg" />
  </div>
</div>

因此,简单滑块div中的内容基本上都会淡入、延迟和淡出到下面的简单滑块div中。如果这部分很好,然而,一些图像的文件大小相当大,有时它们在滑块淡出之前没有加载。

注意:不是降低文件大小的选项:)

如何才能使滑块在加载之前不淡出到下一个图像。然后,一旦它们都加载了,它就可以循环通过。

我希望这是有意义的。:)

谢谢大家。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-03-23 09:20:37

imagesLoaded() Plugin将完美地帮助您解决问题。

它将允许您在一个调用中加载所有图像,然后使用回调函数加载您的滑块。如果你点击我提供的链接,它将向你展示该插件的完整使用示例。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9832854

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档