jQuery 循环延迟加载

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>