This time I will share jQuery Plugin and tutorial about Powerful Image Preload Plugin – jQuery preload.js, hope it will help you in programming stack.
| File Size: | 8.53 KB |
|---|---|
| Views Total: | 1308 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
preload.js is a tiny yet robust jQuery plugin for preloading a sequence of large images before loading them into the DOM.
The plugin currently comes with 4 preload modes to meet your specific design needs:
- Link: preload image links within the document.
- URL: preload an array of image paths you specify.
- Rollover: find and replace images.
- Placeholder: show placeholders before images are loaded.
How to use it:
1. Insert the minified version of the jQuery preload.js plugin after jQuery library and we’re ready to go.
1 |
<script src="https://code.jquery.com/jquery-1.12.4.min.js" |
2 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin="anonymous"> |
4 |
</script> |
5 |
<script src="jquery.preload-min.js"></script> |
2. Preload image links within a specific container (Link mode).
1 |
<div id="example"> |
2 |
<a href="1.jpg">Iamge link</a> |
3 |
</div> |
1 |
$.preload( '#images a' ); |
2 |
// or |
3 |
$('#images a').preload(); |
3. Preload an array of images. (URL mode).
1 |
$.preload([ '1', '2', '3' ], { |
2 |
base:'/', // based url |
3 |
ext:'.jpg' // file extension |
4 |
}); |
4. Rollover images when they’re completely loaded (Rollover mode).
01 |
$.preload( 'img', { |
02 |
find: '.jpg', |
03 |
replace: '_alt.jpg' |
04 |
}); |
05 |
06 |
// or |
07 |
08 |
$('img').preload({ |
09 |
find: '.jpg', |
10 |
replace: '_alt.jpg' |
11 |
}); |
5. Display a placeholder until the image is completely loaded (Placeholder mode).
01 |
{ |
02 |
/* data: |
03 |
loaded: how many images were preloaded successfully. |
04 |
failed: how many images failed the preloading. |
05 |
next: 0-based index of the next image to preload. |
06 |
done: amount of preloaded images ( loaded + failed ). |
07 |
found: whether the last image could be preloaded or not. |
08 |
total: amount of images to preload overall. |
09 |
image: URL of the related image. |
10 |
original: The original source related to this image. |
11 |
*/ |
12 |
13 |
// callback called every time a new url is requested |
14 |
onRequest:function( data ){ // ... }, |
15 |
16 |
// called every time a response is received(successful or not) |
17 |
onComplete:function( data ){ // ... }, |
18 |
19 |
// called after all the images were loaded(or failed) |
20 |
onFinish:function( data ){ // ... } |
21 |
22 |
} |
This awesome jQuery plugin is developed by flesler. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
