JQuery loop plugin with AJAX functionality

Question

I have a page on which I will have several image sliders (for example, 50 sliders + 5-10 pictures each). Unfortunately, due to this huge number of sliders, the page loads very slowly: - (

So far, I have used the famous JQuery Cycle Plugin from Malsup. However, this does not have AJAX functionality, since the image must be loaded before running the loop function.

I am semi experienced, but I don’t have enough time to write my own library that fits my needs.

Therefore, the question is, does anyone know about the JQuery slide (Ajax loading) image plugin? I searched all over the network, but there is too much data overwhelming the real results.

Thanks in advance!

Answer 1

This is a kind of hack, but it may work for you, the slider plugin supports the before and after functions, which we can use to postpone downloading images for you.

taking into account 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>

Note that the first two have a valid src attr, and the rest have asrc, which does not load through the browser.

Now, using the before and after function, we can take advantage of this and switch asrc to the real src, which will cause the browser to request an 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"));
        }
    }
});

An example of this is on jsfiddle .