如何将预加载程序文本添加到jQuery Cycle 2中

How to add preloader text to jQuery Cycle 2

本文关键字：jQuery Cycle 添加 文本 加载 程序      更新时间：2023-09-26

我希望我的jQuery Cycle 2幻灯片在加载下一个图像之前，在图像上显示"Loading…"预加载程序文本。我希望图像以异步方式加载。这是我正在使用的代码：

<figure class="cycle-slideshow manual" 
 data-cycle-fx="fadeout"
 data-cycle-timeout=0
 data-cycle-next="#next"
 data-cycle-prev="#prev"
 data-cycle-loader="true"
 data-cycle-progressive="#read">
    <img src="image1.jpg" />
</figure>
<script id="read" type="text/cycle">
 [
    "<img src='image1.jpg' />",
    "<img src='image2.jpg' />",
    "<img src='image3.jpg' />",
    "<img src='image4.jpg' />",
    "<img src='image5.jpg' />"
 ]
</script>
<section class="pagination center-text">
 <a href="#"><span id="prev">&#171; Previous</span></a> / <a href="#"><span id="next">Next &#187;</span></a>
</section>

我从上面的代码中获得的幻灯片运行良好。但我不确定如何添加预加载的短信。请指导我缺少什么。

这是演示幻灯片的小提琴。

这篇文章有一些想法：如何在下载实际图像时显示加载图像。使用"loading.gif"图像：http://jsfiddle.net/T27yk/2/，使用css：

img.cycle-slide {
  background: url('http://jimpunk.net/Loading/wp-content/uploads/loading1.gif') no-repeat;
}

您是否遇到图像加载时间问题？你似乎在谷歌上托管图像，这应该会使加载时间非常快，从而消除任何类型的加载消息的需要。

相关文章：