Introduction
This is an advanced multi-functional preloader, that has 4 modes integrated. Each mode suits a different, common situation.Modes and settings
The modes are:URL
Preload a JS array of static URLs.
related settings:- base: This string is prepended to the URLs.
- ext: This string is appended to the end of each URL in the array.
Rollover
Preload based on DOM images, slightly modifying their src. Can be used for rollovers, or for image-thumb.
related settings:- find: String or regex that matches part of the srcs.
- replace: Replacement to the matched part, to generate the alternate URL.
Placeholder
Take regular images and set a placeholder image while they load. Show each original image when fully loaded. Allows sequential loading with a threshold.
related settings:- placeholder: URL of the temporal image shown while loading.
- notFound: Optional image to show if a given image failed to load.
Link
Preload images that appear in the href matched links.
related settings: none.
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.
I have many images and they seem to get un-cached
Try setting the option 'enforceCache' to true (+1.0.8).
