jQuery cycle plugin with AJAX functionality

问题

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 :- (

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.

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..

Thanks in advance!

回答1:

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.

given the following markup:

<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>

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

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"));
        }
    }
});

Example of this on jsfiddle.

来源：https://stackoverflow.com/questions/5188331/jquery-cycle-plugin-with-ajax-functionality