jQuery Cycle Lazy Loading

Question

I have a jQuery cycle presentation page that contains about 48 slides. The problem is that initial load of all the assets takes a while so the page looks distorted for about 1-5 seconds. Is there a way to lazy load the assets needed by each slide only when the slide is called or the slide is known to be the previous or next slide?

Answer 1

The jquery cycle2 plugin allows for progressive loading: 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>