How to preset several but not all slide show images with jquery

Question

I would like to create a web player with great movement. Basically a slideshow showing 2-4 images per second. Each image can be no more than 20 KB. I don’t want to preload all the images in the slide show, as there may be thousands, however I need to preload more than just the next image in the show, since it will not play fast enough (due to the playback speed the browser should be loading more than one image at a time).

I was looking for using the jQuery Cycle plugin ( http://malsup.com/jquery/cycle/ ) with a function like addSlide, but I don't know how it would work.

Maybe this will work? -The image is playing a slide show -preloader will try to load up to the next 60 images -playback will wait for the next image in the line to be fully loaded, but will not wait for all 59 others.

The playback / preload order is important for this application.

Answer 1

• You can create a function that preloads N images, when N images are loaded, it calls itself again, how many N? maybe 5 or 10 or you can come up with some formula for calculating N based on the expected image sizes / Display size and duration
• If all the sizes of the images are almost the same, the first downloaded image should first load, so it will not wait for all 59 others.
• plus the variable 'loadedN' which contains the index of the last loaded image
• FireBug is definitely needed to debug this application.
• The playback function should check if the requested image index is loaded or not.

Answer 2

I don't have the exact code in a useful form, but I can explain the structure. I did something very similar in jQuery - although I would say that it is not as much jQuery as Javascript. Here are the basics of what I did ...

Create a function that preloads the image. The way to do this in Javascript is to simply create an image element, for example:

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

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

Create a function that works with this queue, for example:

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

It gives you a framework.

You will need synchronization with the actual image display. This works great as long as everything goes right. Then you need to decide what to do if you are lagging behind in your loading ... you drop the frame or slow down the slide show? I am not familiar with a plugin that implements this strategy, but it will be interesting to implement.

Answer 3

I could imagine that this should be multiprocessor. What I'm thinking of separates the playback logic from the image preload logic. It works like this ...

You start the initializer. As soon as N images are preloaded (you can show a scary “buffering” screen at this point), you call 2 functions.

Function 1 - shows the image, then starts the timer, after which it is called again to display the next image. With 4 images per second, he will call himself every 250 ms.

Function 2 - start the timer. Here you can work with the "expected values". You can expect, for example, 60 images to be processed in 15 seconds. So, after 7 seconds, you start to load the next 30 or 60 images and add them to the image array, while another function still shows the existing images.

Of course, you need a function limiter 1 that stops playback in the Nth-1 element to avoid I / O errors.

I don’t know if it was useful, but that’s how I understood the question.

Answer 4

It sounds problematic, since you can never control how quickly a client can reach images. Using a video is likely to be easier and more satisfactory.

To make this work in js, you will need to create a buffering object that can pause and resume playback when the number of pre-loaded images falls below / above the minimum threshold; like flash movies.