Jssor 内容滑块一次加载所有图像答案

【问题标题】：Jssor Content slider loading all the images at onceJssor 内容滑块一次加载所有图像
【发布时间】：2015-05-07 09:17:21
【问题描述】：

我正在为标题和图像使用带有淡入淡出效果的 Jssor 内容滑块。但是，当页面加载时，所有图像都会立即加载到看起来非常糟糕的背景图像上。我什至对它应用了加载部分，但它有什么不同。

如果有人可以帮助我，请不要立即加载所有图像，而是一张一张地加载图像。

这是滑块代码：

<div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;"> 
    <!-- Jssor Slider Begin -->
    <div id="slider1_container" > 

    <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block;
                top: 0px; left: 0px; width: 100%; height: 100%;">
            </div>
            <div style="position: absolute; display: block; background: url(images/AjaxLoader.gif) no-repeat center center;
                top: 0px; left: 0px; width: 100%; height: 100%;">
            </div>
        </div>

      <!-- Slides Container -->
      <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 900px;
                    height: 477px; overflow: hidden;">
<!-- here all the slides div appears -->
</div>
</div>
</div>

在脚本中添加了这个

var _SlideshowTransitions = [
    //Fade
    {$Duration: 900, $Opacity: 2, $Brother: { $Duration: 1200, $Opacity: 2} }
   ];

var options = {
                $ShowLoading:true,
                $AutoPlay: true, 
                $Fade: true, // for fade 
                $AutoPlayInterval: 4000,                            
                $PauseOnHover: 1,                                   
                $ArrowKeyNavigation: true,                          
                $SlideDuration: 500,        
                $MinDragOffsetToSlide: 20,
                $SlideSpacing: 0,                                   
                $Cols: 1,                                  
                $Align: 0,                                
                $UISearchMode: 1,                                   
                $PlayOrientation: 1,                                
                $DragOrientation: 1,                                
                $SlideshowOptions: {                                
                    $Class: $JssorSlideshowRunner$,                 
                    $Transitions: _SlideshowTransitions,            
                    $TransitionsOrder: 1,                           
                    $ShowLink: true                                    
                  },
              };

【问题讨论】：

发布重现您的问题的示例代码，例如在jsfiddle.net

标签： jquery jssor

【解决方案1】：

在这个 div 中添加了一个新类：

<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 900px;
                    height: 477px; overflow: hidden;">

喜欢这个

<div u="slides" class="slider-common" style="position: absolute; left: 0px; top: 0px; width: 900px;
                    height: 477px; overflow: hidden;">

然后添加了一个css：

.slider-common
        {
            left:-1100px;
            position:absolute;
        }

并且还在脚本中添加了延迟加载：

var options = {
    ...(with all other options),
    $LazyLoading: 0
};

它解决了我的问题。我希望它有所帮助。

【讨论】：

【解决方案2】：

请通过指定src2 属性而不是src 属性来启用延迟加载。

<img src2="url" />

使用延迟加载，默认情况下会加载当前幻灯片和 1 个相邻幻灯片的图像。但是您可以将$LazyLoading 选项设置为 0 以使其仅加载当前幻灯片的图像。

var options = {
    ...,
    $LazyLoading: 0
};

【讨论】：