具有 AJAX 功能的 jQuery 循环插件

我有一个页面，其中有多个图片滑块（例如 50 个滑块+，每个滑块有 5-10 张图片）。不幸的是，由于滑块数量巨大，页面加载速度非常慢:- (

到目前为止，我一直在使用 Malsup 著名的 jQuery Cycle 插件。然而，这缺乏 AJAX 功能，因为需要在触发循环函数之前加载图片。

我有半经验，但缺乏时间编写适合我需要的自己的库。

那么问题来了，有谁了解Jquery滑动（Ajax加载）图片插件吗？我一直在网上搜索，但有太多的数据压倒了真实的结果。

提前致谢！

这是一种黑客攻击，但可能对您有用，滑块插件支持前后功能，我们可以利用该功能来为您推迟图像的加载。

给出以下标记：

<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 http://jsfiddle.net/7YG5u/5/.