jQuery Cycle Lazy Loading

Question

Ich habe eine jQuery-Zyklus Präsentation Seite, die etwa 48 Folien enthält. Das Problem besteht darin, dass die anfängliche Belastung aller Assets einige Zeit in Anspruch nimmt, sodass die Seite für etwa 1-5 Sekunden verzerrt aussieht. Gibt es eine Möglichkeit, die Assets, die für jede Folie benötigt werden, nur dann zu laden, wenn die Folie aufgerufen wird oder die Folie als vorherige oder nächste Folie bekannt ist?

Answer 1

Das jquery Zyklus2 Plugin ermöglicht progressive Belastung: 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>