Question

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

Answer 1

jquery cycle2插件允许渐进加载： 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>

jQuery循环延迟加载

1 个答案: