[英]Jquery Cycle2 Progessive Loading displaying <script> tag
I am trying to setup jQuery cycle2 to progressively load a set of images.我正在尝试设置 jQuery cycle2 以逐步加载一组图像。 There are multiple .slider
objects on the page which need to load images progressively.页面上有多个.slider
对象需要逐步加载图像。
This is the HTML这是 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>
This is the JavaScript这是 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 }); });
You're almost there.你快到了。 If you look at the progressive example on the cycle2 website it notes that the script tag needs to contain a JSON array of the slides to be loaded.如果您查看 cycle2 网站上的渐进式示例,它会注意到脚本标签需要包含要加载的幻灯片的 JSON 数组。 Each individual slide needs to be wrapped in double quotes and the slides separated with a comma.每张幻灯片都需要用双引号括起来,幻灯片用逗号分隔。
Here's the updated JSON for the progressive slides:这是渐进式幻灯片的更新 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>
And here's a working fiddle .这是一个工作小提琴。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.