我有一个页面,其中有多个图片 slider (例如 50 个 slider +,每个 slider 有 5-10 张图片)。不幸的是,由于 slider 数量巨大,页面加载速度非常慢:- (
到目前为止,我一直在使用 Malsup 著名的 jQuery Cycle 插件。然而,这缺乏 AJAX 功能,因为需要在触发循环函数之前加载图片。
我经验丰富,但缺乏时间编写适合我需要的自己的库。
所以问题来了,有谁了解Jquery滑动(Ajax加载)图片插件吗?我一直在网上搜索,但数据太多,无法反射(reflect)真实结果..
提前致谢!
最佳答案
这是一种黑客攻击,但可能对您有用, slider 插件支持前后功能,我们可以利用该功能来为您推迟图像的加载。
给出以下标记:
<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 attr,但其余的是 asrc,它不是通过浏览器加载的。
现在,通过 before 和 after 函数,我们可以利用它并将 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 上的示例.
关于具有 AJAX 功能的 jQuery 循环插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5188331/