Link

There's also a threshold setting, that determines how many images are preloaded simultaneously, it is 2 by default.

Placeholder+Rollover Mode

Since 1.0.6, you can combine these 2 modes, for another common use.
If you have many images in a page, you might want to load a lighter version of them first, and then sequentially load and replace the real images.
To achieve this, use the light versions in the html, then preload the heavy ones as if they were rollover images(find+replace).
If you set 'placeholder' to true, each preloaded image will be set instead once it loads.

Callbacks

The hash of settings can also contain callback functions for 3 important moments of the preloading proccess.
They receive a hash of data, with information about the related image and the overall process.
The callbacks are:

onRequest

Called when requesting a new image.

onComplete

Called when a request is complete.

onFinish

Called when all images are fully preloaded.

Hash of data for the callbacks

The first argument of the callbacks will be a hash.
It contains the following information:

loaded

how many images were preloaded successfully.

failed

how many images failed the preloading.

next

0-based index of the next image to preload.

index

0-based index of the current image.

done

amount of preloaded images ( loaded + failed ).

found

whether the last image could be preloaded or not.

total

amount of images to preload overall.

image

URL of the related image.

original

The original source related to this image.

Troubleshooting

IE throws a "stack overflow" error.

I worked around this limitation of IE on 1.0.6.
If you still get this alert, you'll need to modify $.preload.gap, which is 14 by default. Reduce this number by 1 until it works. You need to exit the site each time, to be sure it works.
Try not to touch the original code, modify it from the outside.

Hi robocop There's no callback() inside the plugin that could cause that.. maybe jQuery.Preload is giving something wrong to jQuery...Do you have a demo I could see ?If you can get any, please use the uncompressed versions so I can debug it...

Hi robocop I see now that an optimization I added in the last release(1.0.2) is not compatible with jQuery 1.2.2 and higher (since jQuery.map got modified). Please use jQuery.Preload 1.0.1 instead.I added a note in the project page, with a direct link to the download.Thanks for finding out!Cheers

Hi w w I tested the plugin and the demo specifically, in my Safari 3 beta Windows and it works well. Are you seeing it on a Mac ? which demo can't you see ? all four ?If you tried it.. which release did you take ?

Hi!I have one question.How i can use your plugin for this situation: $.preload('.itemText img', {onFinish:splashScreen,threshold:2});What i must writing for adding array or urls of two images to preload inside the plugin?Sorry for my english! =-)

is there a way to set the height and width of the placeholder image? because it looks like it is being stretched to fit the preloaded image size if the image has the width and height properties set. Tks for this great plug in

I actually think I have fixed the issue by setting the threshold to 1. The duplicate images always load and the onFinish always seems to fire. I was also experiencing the issue with Google Chrome... which I think is based on Safari.

hi Ariel,i want implement a resize function into plugin during the preload.After many test, this implement is allright for firefox, chrome, safari but not for internet explorer6/7. i can send you my implement if you get me your mail. i like this plugin you are a very good webdev. :)

Hello all,I am new in jQuery, and I would like to make some gallery example, which should work like this. I would like to ask you if you plugin is possible use also in my example.Requirements:I have one div with full image view. Second div with thumbnails. I will render all images in thumbnail div but when I click on thumbnail image i want change url for image in main div (it will generate new http request), but i also want preload one big image from next thumbnail. It is possible to make this with this plugin. Can you give me some link for example page of your plugin. Not only js, but also some html, because I really new in JS especially jQuery. Thanks a lot.Dave

1) is there a way to set some kind of option (a number) so a function is triggered when an amount of images are preloaded?Let me try to explain: I want Preload to use some kind of callback to trigger jquery.Cycle when at least 2 images (of, lets say, a set of 10 imgs) are already loaded.

Also, ideally, jquery.Preload should preload this two images (the very first two images on a list) before any others. Anyway to force that? :D

2) Is there anyway to apply some kind of transition (fadeIn, fadeOut, or any jquery trick) to the placeholder image? Both at the start of preloading and when finishing. Or at least, when finishing...

I've some ideas and feature requests to share for the next version of jQuery.Preload ;). I still have to refine them before posting.

Haven't tested this yet but about the placeholder mode, could it be used without specifying a placeholder image?I won't be using a placeholder image, because I'm using jQuery.Preload + jQuery.Cycle, so my idea is to create a DOM element with a loading image (placed "on top" of the preloaded images) and then remove it on jQuery.Preload onComplete.

The basic $.preload(Urls script fires the preloading in every browser I've tested. In Firefox alone, however, after the images have preloaded, the subsequent script swapping out the srcs of the img tag on drag always grabs a new image from the server, ignoring the preloads.

Nope, I just expect the images to still reside in the browser memory cache so that they load quickly when called from other events like the drag in the example. With your script, Safari works as expected but IE and Firefox don't.

I'm not sure whey the other preload script works this way in all three browsers. In that script no events are fired after the images have preloaded on initial page load. Any reference to those images afterward is quick because it comes from the cache and not fresh from the source a second time.

With this, I take a new array and push references to each of the images onto it. For some reason, Firfox and IE need a variable with the image references existing somewhere for the images to be cached for later use in other scripts.

I can try to find a way to build it into your script, but I'm sure you would probably have a much better idea of how to best integrate it.

Also, thank you for the excellent support you provide for your script!

After the 0s turn to 1s the images are preloaded. The image of the eye can be dragged which swaps out the images in the direction that they are dragged. The images looking down from the left of the eye are the first in the array and the ones looking up from the right are the end of the array.

IE and Firefox both show the dragging is very sluggish after the preload because they grab another copy from the server.

One more thing. In the data hash I found myself needing a 0-based index of the image that just loaded in "onComplete."

So I added this variable to your data hash:index:0,

And this line to your handler:data.index = this.index;

This allows me to keep track of which images have already been preloaded. I need to do this because I will be resorting the order of images to be preloaded each time the view is changed. I don't want to preload anything twice when I call the preloader again.

I've been puzzling over this for a while. As the previous comment hinted at, I'm looking for a method to stop the running preload. Is there a way to stop the running preload from an event attached to another object?

For example, at http://www.chrisgove.com/eye2.htm I want to resort the preload order based on the current view. The way I'm currently trying to implement this is as follows:

1. Stop the currently running preload when the view changes. (onmousemove while dragging)

2. Then create a new order of images to preload based on the current view and excluding any already loaded image.

3. Then preload the newly sorted array.

If there is no current way to stop the preload from outside the plugin, do you have any recommendations on how to add this functionality to it?

I've found that calling $(imgs).stop(); kills the running preload most of the time. Sometimes, inexplicably, the preload keeps running anyway. I wonder if it has to do with calling when the preload is pausing every 14 steps for IE.

Is this the best way to do this? If I keep calling and stopping preload on view change, will I end up with tons of partly completed preload instances in memory?

@CuzogSorry for the delay.Ok, first, you can't stop the preloading of one specific image. I googled that and it seems like only the user can do that with the Stop button.You can though, avoid preloading the remaining images. You do something like this:

Turns out, what was causing it to stop before was an error in the onComplete triggered by the other event. It probably explains the erratic behavior I was seeing. The .stop() method wasn't doing anything at all in the end.

Your solution seems like it will work very nicely. I'll give it some tests and report back.

I made it work by setting a conditional variable from the other event which is checked onComplete and kills the preloader as you recommended. From there the function onFinish is triggered and calls itself and another function which creates a new array with the remaining images. If none are found, the recursion is killed.

With the addition of the index attribute in your preload plugin, I would be able to publish this as a plugin: $().objectvr();

Thank you so much for the help. Your nudge in the right direction really helped achieve everything I wanted with this app.

Just want to let you know the preload does not seem to work in Chrome in regards to teh placeholder option. It will display the first image but then it just shows the placeholder image for everything after that. This is on jquery 1.2.6

I am having a few troubles when using the plugin. First, I am using the plugin in link mode. I am loading about 55 images, so that when the user rolls over the links, the images will show for that link. But, when rolling over the links, the images appear with a delay. But, once that link has been rolled over, it is very fast to go back to it.

Second problem, sometimes the images used in the above example only half load, resulting in an image that looks like half is missing, but just has probably not loaded.

Replace is the setting's name...And yes, you can preload images that you will show as background images, but it won't "read" image urls from elements with background images. Just images and links, not sure what you meant.

Hi Ariel, first of all : thanks for your work always more than helpful for web designers :^)

So, something's going wrong with Opera (Mac or PC version) and your preload plug-in. Opera won't display replacement images if threshold option is not set to the exact value of all elements affected by preload. It then displays all other images without preloading them...

Preloading works perfectly on other browsers.

Here's a complete demo (i modified original images sources to test the replacement image, and threshold is set to 3 for this example) :http://sebastien.vaneyck.free.fr/book_v5/index.php?section=portfolio

the 3 GIF images show up as little image placeholders, or don't show up at all for a second or two, before being replaced by the proper image. This happens in Firefox/Mac and Safari/Mac. I'm loading jQuery and the preload script first thing inside the head tag. I've checked the loaded and failed count and they are 3 and 0 respectively, so the preload function thinks it's working.

I have strange bug on FF3.5.2 (Safari is fine). When preloading in placeholder mode the image doesn't appear and replace placeholder after loading is done. It appears when swapping tabs/resizing browser window.

http://pavelrisenberg.com/dropbox/bernaskoni/html/www.html

Example is pretty complex, but nothing changes when I comment all other functionality.

Hi Ariel,is it possible to preaload css-background-images, too? Or, do you plan to able your plugIn to do that? I search for a "site-preaload"-plugin. Like the preloader-functionality on flash-sites. Maybe you know such a plugin. Thanks for that cool plugin.Regards arno

Thankx for the contribution...would be more than happy to bounce back a paypal bump for a comment or two on this...

I'm asked to implement a rollover menu created by Fireworks - a 'Swap Images' behavior. The graphic artist went overboard with the graphics size-wise and wowed the boss. Now I need to make it usable.

I'd hate to start from scratch and do everything the jQuery way and searching 'jQuery's preloading' led me here. The question boils down to: can I merge your preloading code with Firework's so as to replace a low-res thumbnail until the bigazzed 'jpg' is loaded? Happy to pass along a viewable demo privately if you haven't encountered the stock Fireworks behavior before.

@SokranupheapOk, i just tested on Windows Seven with Safari 4. And still no problem, my implementation of jQuery.Preload works perfectly.

So, two things :- activate the develop menu in Safari (u can activate it in preferences > advanced, and then find it in menus) to check javascript errors or activity.- post a link to your project or demo, and then we could maybe help you better.

Oh, sorry ZeB i didn't have the Hosting to show you a demo. my objective is to do a slide show with slide transition effect. but when i click next image while preload processing it's quite slow that it make my CPU performance process almost 100% until the preload finish.

FYI, I've found that if there are duplicate links, line 119:( data.next == data.total ) never evaluates to true and the OnFinish callback is never called. I don't understand enough to know if it's benign or not but I thought you might be interested in this edge case.

Hi,I need to change the body backgroud image on an href click. What should I do to preload those images properly with your tool and set tham as new body background in a second time?I'm not that confident with JavaScript, I've Just tried this way (but it seams to me it did not work):

I have a problem with Firefox and even Cuzog's solution doesn't seem to help. The website I'm working on is at http://www.infotop.rs/devel/. Once you are done with the intro, there are two slideshow-like animations that are supposed to preload images. Preloading works in Chrome, IE and Opera, but not in Firefox. I'm using Firefox 3.5.7 on Windows.

my preload working fine but it reads only 2 images if there are 3.it failed to read all images.please guide me.you can check demo here http://fcukindia.com/product_details.php?productid=954&maincatid=1&categoryid=2

Although this hasn't been updated in years, I believe I found a fix for the Chrome issue mentioned by Anonymous March 9, 2009. It is that the .load function is not triggering in Chrome for images that are already cached (a recognized problem with .load), such as if you are loading the image more than once per page. The fix is simply to put this conditional at line 123 after "img.src = sources[data.next++];":