我有一个jQuery循环演示页面,其中包含大约48张幻灯片.问题是所有资产的初始加载需要一段时间,因此页面看起来会扭曲大约1-5秒.有没有办法延迟加载每张幻灯片所需的资源,只有在调用幻灯片或已知幻灯片是上一张或下一张幻灯片时?
解决方法
jquery cycle2插件允许渐进加载:
http://jquery.malsup.com/cycle2/demo/progressive.php
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>