Generale image preloading question

Question

I used to code in javascript - jquery and PHP. I like to have a folder of, let asy 100 images, scan it and get it to screen with a fade in beetween, and delay... Much of that can be done pretty esealy

The question : only for speed purpose, i like to get img1, show it preload img2 wait 2-3 second fade to img2 preload img3 wait ... and so on...

so having only 2 image load at the same time is much faster, and dont require much codeing, just switching what will be the next image...

Now, having a on 100 image make it slow to load, and i dont talk about 250! that just kill the computer Any idea

I think about ajax ad jquery tu dynamicly change the img reference and preload.... any idea anyone ????

Answer 1

While you are displaying image1, get the browser to load and cache image2 by creating an image tag for it, or using the javascript image object.

When you are ready to switch images, just update the main image from image1 to image2 (it will already be in the browser cache, so no delay). At this point update your hidden image to image3 and wait for it to fully load.

Answer 2

in jquery, you can make fade animation a callback of image.load event

like this (untested)

  images = [ "one.jpg", "two.jpg" ...];
  divs = ["#first", "#second"];
  fore = 0;

  function show() {
   if(!images.length) return;
   var back = 1 - fore;
   $(divs[back]).html("<img>").find("img").attr("src", images.shift()).load(function() {
    $(divs[fore]).fadeOut();
    $(divs[back]).fadeIn();
    fore = back;
    setTimeout(show, 1000);
   });
  }