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

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

<script src="../jquery-validation/dist/jquery-validate.min.js"></script>
<script src="../jquery-validation/dist/additional-methods.min.js"></script>

像这样

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

然后添加了一个CSS：

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

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

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

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

Answer 2

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

<img src2="url" />

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

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

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

2 个答案: