Jquery Cycle2 Progressive wird geladen <script> wird angezeigt

Question

Ich versuche, jquery cycle2 zum progressiven Laden einer Reihe von Bildern einzurichten. Es gibt mehrere ".slider" Objekte auf der Seite, die Bilder laden müssen progressivelly

Dies ist die HTML

<li class="slider"><img title="Company Name" alt="Company Name" src="/photos/listings/company-name6.jpg"> 
 
<script class="other-slides" type="text/cycle">[<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide.jpg'> 
 
<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide1.jpg'> 
 
<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide2.jpg'> 
 
<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide3.jpg'> 
 
<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide4.jpg'> 
 
]</script></li>

Dies ist der Javascript

$('.slider').each(function() { 
 
    var $this = $(this); 
 

 
    $this.cycle({ 
 
     slides: '> img', 
 
     sync: true, 
 
     progressive: function() { 
 
      var slides = $('.other-slides', $this).html(); 
 
      return $.parseJSON(slides); 
 
     }, 
 
     speed: 1500, 
 
     timeout: 4000, 
 
     loader: true 
 
    }); 
 
});

Das Ausgangsbild wird angezeigt und dann wird es angezeigt Zyklen und zeigt dies Result

Answer 1

Sie sind fast da. Wenn Sie die progressive example auf der cycle2-Website betrachten, wird darauf hingewiesen, dass das Skript-Tag ein JSON-Array der zu ladenden Folien enthalten muss. Jede einzelne Folie muss in doppelte Anführungszeichen eingeschlossen und die Folien mit einem Komma getrennt werden.

Hier ist der aktualisiertem JSON für die progressive Dias:

<script class="other-slides" type="text/cycle"> 
[ 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide.jpg'>", 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide1.jpg'>", 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide2.jpg'>", 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide3.jpg'>", 
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide4.jpg'>" 
] 
</script> 

Und hier ist ein working fiddle.