具有AJAX功能的jQuery循环插件

Question

我有一个页面,我将有多个图片滑块(如50个滑块+每个5-10张图片).不幸的是,由于这个大量的滑块,页面加载速度很慢: - (

到目前为止,我一直在使用Malsup着名的jQuery Cycle Plugin.但是,这缺乏AJAX功能,因为需要在触发循环功能之前加载图片.

我是半经验丰富的,但没有时间编写适合我需求的自己的图书馆.

因此,问题是,是否有人知道Jquery滑动(Ajax加载)图片插件？我一直在网上搜索,但有太多的数据压倒了真正的结果..

提前致谢!

Answer 1

这有点像黑客,但可能适合你,滑块插件支持前后功能,我们可以利用它来推迟为您加载图像.

给出以下标记:

<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的例子.