jQuery image preload/cache halting browser -

In short, I have a large photo gallery and I am trying to cache several thumbnail images as well I can do that when the first page loads <1000> can be thumbnails.

The first question - is it stupid to try to load / cache beforehand?

The second question - when the preload () function fire, the whole browser stops responding for one minute to two. Callback fire occurs at that time, so preload is complete. Is there a way to accomplish "smart preloading" that does not hinder the user's experience / speed in trying to load these many objects?

$ The PreLoadImages function moves from here:

How do I implement it here:

  $ (document) .ready (function () {setTimeout ("Preload ()", 5000);}); Function preload () {var images = ['image1.jpg', ... 'image1000.jpg']; $ .PpreLoad Images (Picture, Function () {Alert ('done');}); }  

1000 images are plenty. Am I asking too much?

After looking at that preload script, it seems that the script does not wait for the next picture To load an image first I believe that this causes your browser to be hanged - you are essentially asking the browser to load hundreds of images at the same time.

A better method is to use a recursive function to start loading. The next image is only made only after the first = imageList.length) {callback (); } And {loadNext (); }} Pic.src = imageList [count]; } LoadNext (); }; $ (Document) .ready (function () {var files = ['file1, jpg', 'file2.jpg']; preloyed images (files, functions) {warning ("done!");});});

Then, the important thing is to make sure that you are compelling the browser to download an image in only one time, besides any other browser you can Till they are not completely finished.

-

Edit: New version without recycling I tested this one with 1000+ item array and did not face any errors. My idea was to replace the recurrence with an interval and bullion; Every 50 milliseconds, we choose the function and ask "Is anything loading?" If there is no answer, then we will go ahead and line up the next image. It repeats until all its work is completed.

  var preloadImages = function (imageList, callback) {var number = 0; Var loading = false; Var loadNext = function () {if (! Loading) {loading = true; Count ++; Picture = new image (); Pic.onload = function () {loading = false; If (calculation> = imageList.length-1) {clear interval (loadInterval); call back(); }} Pic.src = imageList [count]; }} Var loadInterval = window.setInterval (loadNext, 50); };  

I'm still curious how it will, according to the performance, on a full webpage with a lot of things. How do we know this?