jQuery Cycle Lazy Loading

Question

Tengo una página de presentación de ciclo de jQuery que contiene aproximadamente 48 diapositivas. El problema es que la carga inicial de todos los activos lleva un tiempo, por lo que la página se ve distorsionada durante aproximadamente 1-5 segundos. ¿Hay alguna forma de cargar los activos necesarios para cada diapositiva solo cuando se llama a la diapositiva o se sabe que la diapositiva es la diapositiva anterior o siguiente?

Answer 1

El jQuery cycle2 plug-in permite la carga progresiva: 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>