jQuery Cycle Lazy Loading

Question

我有一個jQuery循環演示文稿頁面，其中包含大約48張幻燈片。問題是，所有資產的初始加載需要一段時間，因此頁面看起來失真約1-5秒。只有在調用幻燈片或已知幻燈片是上一張或下一張幻燈片時，是否有方法可以延遲加載每張幻燈片所需的資源？

Answer 1

jQuery的循環2插件允許漸進式加載： 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>