jquery - jQuery 循环延迟加载

Question

我有一个包含大约 48 张幻灯片的 jQuery 循环演示页面。问题是所有资产的初始加载需要一段时间，因此页面看起来扭曲了大约 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>