IntroductionThis is an advanced multi-functional preloader, that has 4 modes integrated. Each mode suits a different, common situation.
Modes and settingsThe modes are:
URLPreload a JS array of static URLs.
- base: This string is prepended to the URLs.
- ext: This string is appended to the end of each URL in the array.
RolloverPreload based on DOM images, slightly modifying their src. Can be used for rollovers, or for image-thumb.
- find: String or regex that matches part of the srcs.
- replace: Replacement to the matched part, to generate the alternate URL.
PlaceholderTake regular images and set a placeholder image while they load. Show each original image when fully loaded. Allows sequential loading with a threshold.
- placeholder: URL of the temporal image shown while loading.
- notFound: Optional image to show if a given image failed to load.
LinkPreload images that appear in the href matched links.
related settings: none.
Placeholder+Rollover ModeSince 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.
CallbacksThe 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:
onRequestCalled when requesting a new image.
onCompleteCalled when a request is complete.
onFinishCalled when all images are fully preloaded.
Hash of data for the callbacksThe first argument of the callbacks will be a hash.
It contains the following information:
loadedhow many images were preloaded successfully.
failedhow many images failed the preloading.
next0-based index of the next image to preload.
index0-based index of the current image.
doneamount of preloaded images ( loaded + failed ).
foundwhether the last image could be preloaded or not.
totalamount of images to preload overall.
imageURL of the related image.
originalThe original source related to this image.
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.
I have many images and they seem to get un-cached
Try setting the option 'enforceCache' to true (+1.0.8).
- jQuery.Preload 1.0.8 Zip(all files and docs)
- jQuery.Preload 1.0.8 Source(to learn or test)
- jQuery.Preload 1.0.8 Minified(recommended)
Update 3/6/08Added 1.0.5, patched the bug of Safari 2
Update 3/10/08Added 1.0.6, patched IE's stack overflows and more.
Added placeholder+rollover mode and troubleshooting.