javascript - Jquery Cycle2 渐进式加载显示 <script> 标签

Question

我正在尝试设置 jQuery Cycle2 来逐步加载一组图像。页面上有多个.slider对象需要渐进加载图片。

这是 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>

这是 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
    });
});

显示初始图片，然后循环显示此图片 Result

Answer 1

你就快到了。如果你看progressive example在 Cycle2 网站上，它指出脚本标签需要包含要加载的幻灯片的 JSON 数组。每张幻灯片都需要用双引号引起来，并且幻灯片之间用逗号分隔。

以下是渐进式幻灯片的更新 JSON:

<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>

这是一个 working fiddle .