jquery - Jssor 内容 slider 一次加载所有图像

Question

我正在使用具有淡入淡出效果的 Jssor 内容 slider 来处理标题和图像。 但是，当页面加载时，所有图像都会立即加载到背景图像上，这看起来非常糟糕。 我什至对它应用了加载部分，但它有任何区别。

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

这是 slider 代码:

<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                                    
                  },
              };

Answer 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
};

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