Preload images for jQuery Cycle Plugin

Question

Hi, I’m quite new to jquery and trying to figure out how to preload images for the jQuery Cycle Plugin.

I have 5+ large size images and I need those to be preloaded before starting the slideshow with Cycle plugin. Also I need to display a loading gif wile it preloads the images.

I have tried to implement the technique here http://jqueryfordesigners.com/image-loading/

but still couldn’t figure out how to make it work with the Cycle plugin.

Can anyone please help me with this?

Thanks

Answer 1

If you're doing this how the Cycle documentation suggests, then there's no need for preloading as such. The images are all on the page when it loads, and will be loading immediately. If they're big enough that you want to add some sort of "loading..." notification, that's pretty easy

// It's possible, with caching, that the images could
//  be loaded *before* this code runs.  So:
var is_image_loaded = function(img) {
    // IE
    if(!img.complete) {
        return false;
    }
    // Others
    if(typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
        return false;
    }
    return true;
}

var first_slide = $('#slideshow img:first');
if(is_image_loaded(first_slide.get(0)) {
    $('#slideshow').cycle();
} else {
    first_slide.load(function(e) {
        $('#loading').hide();
        $('#slideshow').show().cycle();
    });
    $('#slideshow').hide();
    // I'll handwave the display of a loading indicator, since
    // it's covered in the tutorial linked in the question.
    $('#loading').show();
}

Probably with some adjustment for your situation. But it's a start.

Answer 2

Hi David,

Thanks for the reply. I used your method and adjust according to my situation.

But it give me an error msg(with firebug) and sideshow doesn't seems to be working fine.

here is the link to what I have done http://www.thefancyhouse.com/charlienutting/

It seems like is_image_loaded(first_slide.get(0) fails to select the first image of the slide show.

any further help will be really appreciated :)

Thanks you!

Answer 3

Hi all..

Manage to make it working..

http://www.thefancyhouse.com/charlienutting/

Thanks to David of course.

I got the idea from you.. but different approach :)

I'm learning Jquery fast.

Thanks everyone!

Answer 4

make seance ?

Answer 5

yes that makes seance

Answer 6

I can not login

Answer 7

Can you post the code for loading the first image? It would be appreciated...Thanks!