我一直在寻找优化我的jssor滑块几天,我似乎无法让懒散的装载工作。
Basicaclly,我正在尝试通过下载滑块并显示幻灯片来减少下载我的网页所需的初始带宽。 我尝试使用$ LazyLoding:0选项并将我图像的所有“src”属性替换为“src2”,但下载我的网页的初始带宽没有变化。
这是我的配置:
{
$DragOrientation: 1, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$SlideDuration: 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$HWA: false,
$LazyLoading: 0,
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 1, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
},
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
$Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 1, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$Lanes: 1, //[Optional] Specify lanes to arrange items, default value is 1
$SpacingX: 10, //[Optional] Horizontal space between each item in pixel, default value is 0
$SpacingY: 10, //[Optional] Vertical space between each item in pixel, default value is 0
$Orientation: 1 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
},
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 3,
$PlayOutMode: 3
}
并且是html中的幻灯片
<div debug-id="slide-0" style="width: 2160px; height: 1440px; top: 0px; left: 0px; position: absolute; overflow: hidden;">
<img u="image" src2="http://foobar.com/foo.jpg" border="0" style="width: 2160px; height: 1440px; top: 0px; left: 0px; position: absolute;">
<div u="caption" t="LT" id="foo bar" style="position: absolute; line-height: 60px; top: 10px; left: 10px; height: 60px; width: 25%; opacity: 1; background-color: rgb(140, 0, 26);" class="captionRed">
foooooo </div>
<div id="link_bar" u="caption" t="LT" style="position: absolute; top: 1375px; line-height: 60px; left: 1800px; height: 60px; width: 350px; opacity: 1;" class="captionLinksRed">
barrrr
</div>
<div u="caption" t="LT" id="link_foo" style="position: absolute; top: 1375px; line-height: 60px; left: 1400px; height: 60px; width: 350px; opacity: 1;" class="captionLinksRed">
foo bar
</div>
我错过了什么吗?也许我不太清楚装载是如何工作的! 谢谢你的帮助!