具有AJAX功能的jQuery循环插件 [英] jQuery cycle plugin with AJAX functionality

问题描述

我有一个页面，其中有多个图片滑块(例如50个滑块+分别具有5-10张图片).不幸的是，由于大量的滑块，页面加载速度非常慢:-(

I have a page where I'll have multiple picture sliders (like 50 sliders+ with 5-10 pictures each). Unfortunately because of this massive amount of sliders, the page loads really slow :- (

直到现在，我一直在使用Malsup着名的jQuery Cycle Plugin.但是，它缺少AJAX功能，因为在触发循环功能之前需要先加载图片.

Until now I've been using the famous jQuery Cycle Plugin by Malsup. However, this lacks AJAX functionality, as the picture's needs to be loaded before firing the cycle function.

我是半经验丰富的，但是缺乏时间来编写适合自己需要的自己的库.

I'm semi experienced, but lacking the time to write my own libary suiting my needs.

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

Hence the question, does anyone have knowledge of a Jquery sliding (Ajax loading) picture plugin? I've been searching all over the web, but there's too much data overwhelming the real results..

提前谢谢！

推荐答案

这是一种技巧，但也许可以为您服务，滑块插件支持before和after函数，我们可以利用该函数来推迟为您加载图片.

This is sort of a hack but might be able to work for you, the slider plugin supports a before and after function which we can take advantage of to defer the loading of the images for you.

给出了以下标记:

<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，不会通过浏览器加载.

Notice the first two have valid src attr, but the rest are asrc which is not loaded via the browser.

现在有了before和after函数，我们可以利用它，并将asrc切换为真实的src，这将导致浏览器查询图像.

Now with the before and after function we can take advantage of that and switch the asrc to a real src which will cause the browser to query for the image.

$('#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循环插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！