0

I am creating a slideshow using nested li's:

<ul id="ss_images_set">
                <li>
                    <img link="images/koala_1.jpg" />
                    <p class="img_caption">&#169;Copyright</p>
                    <p class="img_author">John Merriam</p>
                    <p class="img_href">http://www.twitter.com</p>
                    <p class="img_hashtag">JohnMerriam</p>
                </li>

I will be uploading new images daily to this slideshow, so there will be many images in the set (hundreds). There are so many pre-loaders out there that I am confused as to what to use to load only the next image. The slideshow has an image pre-loader, but I don't think it works properly because the next images are clearly not cached (content below slideshow jumps up and down when going to next image).

Here is the pre-loader script:

function preload_images(){
var pre_image = curr_img - 1;
if(pre_image < 0) pre_image = (tot_elements-1);

var curr_obj = 0;

if(!$('#img_preloaded_'+pre_image).length > 0){
    curr_obj = slideshow[pre_image];
    $('body').append('<img src="'+curr_obj["img_url"]+'" id="img_preloaded_'+pre_image+'" class="preload_box" />');
}

var pre_image = curr_img + 1;
if(tot_elements==pre_image) pre_image = 0;
if(!$('#img_preloaded_'+pre_image).length > 0){
    curr_obj = slideshow[pre_image];
    $('body').append('<img src="'+curr_obj["img_url"]+'" id="img_preloaded_'+pre_image+'" class="preload_box" />');
}

I don't know why it's not caching. Is it written wrong? Is it in the wrong spot in the following fiddle?

Fiddle with JS: http://jsfiddle.net/doobada/9m9eq/

Current ex. of slideshow (content below jumps up and down): https://www.assembla.com/code/cfrepo/subversion/node/blob/trunk/index.html#image=JohnMerriam

Ok, jQuery is not my strong suite (taking the tuts+ courses now), but this shouldn't be taking me 3 weeks to figure out.

Thanks for your help.

Abubakkar
  • 15,488
  • 8
  • 55
  • 83
doobada
  • 29
  • 7
  • Preloading images in js (that work across browsers) is a pain in the back. Some tend to "optimize out" the loading of non visible images. – vinczemarton Nov 01 '12 at 13:59
  • @SoonDead what do you mean by "'optimize out' the loading of non visible images"? – doobada Nov 01 '12 at 14:14
  • That for example in chrome when you attach a non visible image to the dom, it wont just load it. But I'm not sure how really was it, I have been hacking around with this a year ago, so perhaps a lot changed since then. – vinczemarton Nov 01 '12 at 14:19

1 Answers1

0
var newImageUrl = 'someimage.png';

/* preload an image using jQuery: */
$('<img>').attr( {
    src: newImageUrl
} ).load(function() {
    /* image is loaded and could be used */
} );
feeela
  • 29,399
  • 7
  • 59
  • 71
  • But it's not cross browsers solution :/ – GomatoX Nov 01 '12 at 13:46
  • Thanks for your answer, feeela. I'm looking for cross-browser support and I need something that loads the next image in the ul - I won't know the next image url. – doobada Nov 01 '12 at 13:56
  • @GomatoX I didn't knew of any browser where that code doesn't work. Could you please tell me, in which browsers there are problems with that code? – feeela Nov 01 '12 at 16:48
  • Browser is opera, why i don't know. – GomatoX Dec 03 '12 at 12:01