Jquery 循环 2 渐进式加载显示 <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

你快到了。如果您查看 cycle2 网站上的 progressive example，它会指出脚本标记需要包含要加载的幻灯片的 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。

Jquery 循环 2 渐进式加载显示 <script> 标签

Jquery Cycle2 Progessive Loading displaying <script> tag

javascript

jquery

jquery-cycle2

cycle2