Jquery Cycle2 渐进式加载显示 <script> 标签答案

【问题标题】：Jquery Cycle2 Progessive Loading displaying <script> tagJquery Cycle2 渐进式加载显示 <script> 标签
【发布时间】：2017-11-20 00:16:40
【问题描述】：

我正在尝试设置 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

【问题讨论】：

对于 jQuery 所做的所有努力，将永远锁定版本，您可以改为学习纯 JavaScript，而不是锁定版本，不会在已经非常高的水平上遭受巨大的性能打击 /低性能语言并大大提高您的技能。
@John 这个问题已经问了四年了，当时正在解决现有系统上的问题。我真的不认为你需要评论。

标签： javascript jquery jquery-cycle2 cycle2

【解决方案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。

【讨论】：