具有AJAX功能的jQuery周期插件
具有AJAX功能的jQuery周期插件
提问于 2011-03-04 08:28:40
我有一个页面，在那里我会有多个图片滑块(比如50个sliders+，每个5-10张图片)。不幸的是，由于大量的滑块，页面加载非常慢:- (
到目前为止，我一直在使用Malsup著名的jQuery Cycle插件。但是，这缺少AJAX功能，因为在触发cycle函数之前需要加载图片。
我是半有经验的，但缺乏时间来编写自己的库来满足我的需要。
因此，有没有人知道Jquery sliding (Ajax加载)图片插件？我一直在网上搜索，但有太多的数据压倒了真正的结果。
提前感谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-03-04 09:31:07
这是一种技巧，但也许可以为你工作，滑块插件支持之前和之后的功能，我们可以利用它来为你推迟图像的加载。
给定以下标记：
<div id="s1" class="pics">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
<img asrc="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
<img asrc="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
<img asrc="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
<img asrc="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
<img asrc="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
<img asrc="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" />
</div>请注意，前两个文件具有有效的src属性，但其余的是asrc，它不是通过浏览器加载的。
现在，使用之前和之后的函数，我们可以利用这一点，并将asrc切换为真正的src，这将导致浏览器查询图像。
$('#s1').cycle({
fx: 'shuffle',
speed: 'fast',
timeout: 0,
next: '#next2',
prev: '#prev2',
before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
if ($(nextSlideElement).attr("asrc")) {
$(nextSlideElement).attr("src", $(nextSlideElement).attr("asrc"));
}
},
after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
if ($(nextSlideElement).attr("asrc")) {
$(nextSlideElement).attr("src", $(nextSlideElement).attr("asrc"));
}
}
});这是jsfiddle上的一个例子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5188331
复制相关文章
相似问题
腾讯云开发者
