如何将预加载器文本添加到jQuery Cycle 2

我希望我的jQuery Cycle 2幻灯片显示图片上的“加载...”预加载器文本，直到下一个加载。我想要以异步方式加载图像。这里是我使用的代码：如何将预加载器文本添加到jQuery Cycle 2

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

我从上面的代码获得的幻灯片工作正常。但我不确定如何向其添加预加载文本消息。请指导我错过什么。

这是一个fiddle展示幻灯片。

来源

2013-11-24 vishall

cycle2具有非常强大的API。你有什么尝试？ – charlietfl

认为我做得正确，但未能找到如何添加文本预加载器。 [小提琴]（http://jsfiddle.net/T27yk/1/） – vishall

我不认为API公开图像加载事件。我们需要在API事件中实现你自己的。 WOuld表示解析幻灯片src并在事件回调中使用自己的JavaScript加载器代码 – charlietfl

这篇文章有一些想法：How to display loading image while actual image is downloading。使用“loading.gif”的形象：http://jsfiddle.net/T27yk/2/，使用CSS：

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

是否遇到与图像的加载时间问题？您好像在谷歌上托管图片，这会使加载时间非常快，不需要任何类型的加载消息。

来源

2013-11-24 17:43:25

嗨，亨利！非常感谢！我将使用jQuery加载函数放置一个自定义加载器。是的，我在Google上托管了演示图像，并没有意识到快速加载逻辑。再次感谢您的帮助，问候！ – vishall

如何将预加载器文本添加到jQuery Cycle 2

回答

相关问题