jQuery Cycle Lazy Loading

Question

我有一个jQuery循环演示文稿页面，其中包含大约48张幻灯片。问题是，所有资产的初始加载需要一段时间，因此页面看起来失真约1-5秒。只有在调用幻灯片或已知幻灯片是上一张或下一张幻灯片时，是否有方法可以延迟加载每张幻灯片所需的资源？

Answer 1

jQuery的循环2插件允许渐进式加载： http://jquery.malsup.com/cycle2/demo/progressive.php

<div class="cycle-slideshow auto" 
    data-cycle-fx="scrollHorz" 
    data-cycle-timeout="2000" 
    data-cycle-caption=".caption1" 
    data-cycle-caption-template="{{slideNum}}/9" 
    data-cycle-loader="true" 
    data-cycle-progressive="#images" 
    > 
    <!-- only one image declared in markup --> 
    <img src="http://jquery.malsup.com/cycle2/images/beach1.jpg"> 

    <!-- 
     JSON array of slides to be loaded progressively, 
     nested inside a script block. The script block does not need 
     to be inslide the slideshow container, it can be anywhere on the 
     page. Note the type on the script tag. 
    --> 
    <script id="images" type="text/cycle"> 
[ 
    "<img src='http://jquery.malsup.com/cycle2/images/beach2.jpg'>", 
    "<img src='http://jquery.malsup.com/cycle2/images/beach3.jpg'>", 
    ... 
    "<img src='http://jquery.malsup.com/cycle2/images/beach9.jpg'>" 
] 
</script> 
</div> 
<div class="center caption1"></div>