4

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!

Nate
  • 30,286
  • 23
  • 113
  • 184
Kristian
  • 1,343
  • 4
  • 29
  • 47

1 Answers1

6

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.

Mark Coleman
  • 40,542
  • 9
  • 81
  • 101
  • Hi Mark, thanks for your example. Though I'm afraid that's not really gonna cut it. I'm looking for a solution where I can load the next picture, when the users chooses to click prev or next. – Kristian Mar 04 '11 at 10:32
  • @kris, see update, I looked more into the api for the cycle plugin and using `before` and `after` you might be able to accomplish what you want. This should work with timeout and next/prev. – Mark Coleman Mar 04 '11 at 16:27
  • Mark, I can't thank you enough. Thank you very much - I didn't think of this solution myself.. I appreciate your help! – Kristian Mar 04 '11 at 22:06
  • 1
    Just a passer-by that benefitted from stealing this idea. +1! – Matt Stein Mar 15 '12 at 15:43
  • Good idea! except shouldn't the conditional logic also check that there is no src attribute already defined on the nextSlideElement? otherwise it'll rerun that logic when there is no need to. just a thought. – johntrepreneur Mar 28 '13 at 00:01