Geek asks and answers

JQuery Cycle Lazy Download

I have a jQuery loop view page that contains about 48 slides. The problem is that the initial loading of all assets takes some time, so the page looks distorted for about 1-5 seconds. Is there a way to lazily load the assets needed for each slide only when the slide is called up or the slide is known as the previous or next slide?

+5
source share
1 answer

The jquery cycle2 plugin allows 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>
+5
source

More articles:


All Articles