how to preload more than one but not all images of a slideshow with jquery

Question

I'd like to create a web based stop motion video player. Basically a slideshow that shows 2-4 images per second. Each image might be a maximum of 20KB. I don't want to preload all images in the slideshow as there might be thousands, however I need to preload more than just the next image in the show as this will not playback fast enough (because of the playback speed the browser needs to be loading more than one image at a time).

I've been looking at using the jQuery Cycle Plugin (http://malsup.com/jquery/cycle/) with a addSlide type function but don't know how to make it work.

Would something like this might work? -Slideshow starts -image is played back -preloader will attempt to load up to the next 60 images -playback will wait for the next image in line to completely load, but will not wait for all 59 others.

The playback / preloading order is important for this application.

Answer 1

• You can create a function that pre-loads N images , when N images are loaded it calls itself again, How much is N ? can be 5 or 10 or you can come up with some formula to calculate N based on expected Images dimensions/Size and time duration of displaying
• If all images size are almost the same , first image requested to load should finish loading first, So it wouldn't wait for all 59 others.
• plus a variable 'loadedN' that holds index of last loaded image
• FireBug is certainly needed to debug this App.
• Playback function needs to check if the requested image index is loaded or not

Answer 2

I could imagine that this has to be multiprocessing. What I am thinking of is split the playback logic from the image preload logic. It works like this...

You start an initializer. Once N pictures are preloaded (you can show the dreaded "buffering" screen at this point), you call 2 functions.

Function 1 - shows an image, then starts a timer after which it is called again to show the next image. With 4 images per second, it would call itself every 250ms.

Function 2 - starts a timer. Here you can work with "expected values". You can expect that, for instance, 60 images are done processing after 15 seconds. So, after 7 seconds, you start loading the next 30 or 60 images and add those to the image array, all while the other function is still showing of the already present images.

Of course, you need a limiter on function 1, which stops playback at the Nth-1 element in order to avoid stack overflows or I/O Errors.

Don't know if this was useful, but it is how I understood the question.

Answer 3

Sounds problematic as you'll never be able to control how fast the client can attain the images. To use video would probably be an easier and more satisfactory result.

To make this work in js you'd have to build a buffering object which can pause and resume the playback whenever the count of preloaded images falls under/over a minimal threshold; like flash movies.

Answer 4

I don't have the exact code in a usable way, but I can explain the framework. I have done something very similar in jQuery-- although I would say it's not so much jQuery as Javascript. Here's the basics of what I did...

Create a function that "preloads" an image. The way to do this in Javascript is simply to create an Image element, eg:

  `function preloadAnImage(src) {
    var i = new Image(1020, 492);
    i.src = src;
  }`

Create a list of images, eg. imagesToPreloadIndex = ['image1.jpg','image2.jpg'... ];

Create a function that works off this queue, eg:

function preloadNextImage() {
    preloadAnImage(imagesToPreload.pop());   
    if (imagesToPreloadIndex.length > 0) {
      setTimeout(preloadNextImage, 300);
    }
  }

That gives you the framework.

You'll want this synced up with the actual displaying of the images. This works fine as long as everything goes right. Then you need to decide what to do if you are getting behind in your loading... do you drop a frame or slow down your slideshow? I'm not familiar with a plugin that implements this strategy, but would be fun to implement.