Jssor Content 滑块一次加载所有图像

Question

我正在为标题和图像使用具有淡入淡出效果的 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                                    
                  },
              };

Answer 1

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

<img src2="url" />

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

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

Answer 2

在此 div 中添加了一个新的 class :

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

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

Jssor Content 滑块一次加载所有图像

Jssor Content slider loading all the images at once

jquery

jssor