Look Inside
Howdy, all! Today I would like to share with you a brand new jQuery plugin, called jPreLoader. jPreLoader can create a preloading screen for your website before all your images (including the images in CSS) are fully loaded. It will come in handy when you wish to preload all the images on your page before exposed to user. It’s useful for those games websites.
Well, you can also create a Splash Screen during preloading process to introduce your products, or describe about your page, or show the instructions of gameplay as well as put an advertisement during the waiting time of your user.
[browser]jPreLoader works well with jQuery 1.7.1 (others haven’t tested yet) and compatible with IE7 and above, Chrome, Firefox and Safari.[/browser]
This idea is inspired by Gaya’s cool “QueryLoader2” plugin which able to preload your website in style.
The beautiful images used in demo is from Mike Shaw, a Cheshire UK based photographer.
Features:
- Full page Loading Screen.
- Progress bar with progress percentage.
- Display custom Splash Screen during loading process.
- Preload all images in
<img>tag as well as in Stylesheet. - Using CSS to customize.
- Debug mode to check for broken images.
How to use:
1. Include the jPreLoader script and css inside the <head> tag.
<script type="text/javascript" src="js/jpreloader.js"></script>
#Tips: Be sure to have jQuery script included first.
2. Call the jPreLoader function at the bottom (right before </body>) of your page.
<script type="text/javascript">
$(document).ready(function() {
$('body').jpreLoader();
});
</script>
3. Do any jPreLoader configuration/options to suit your needs (refer to Configuration section below). (Optional)
4. Customize the jPreLoader look using CSS if you like. (Optional)
5. That’s it! You’re DONE!
Configuration:
.jPreLoader( [Options] [, callback] )
Options: An array to configure the properties of jPreLoader.
Callback: A function to call once all the loading are completed.
OPTIONS
| Name | Type | Value | Description |
|---|---|---|---|
| showSplash | Boolean | true | Enables showing the Splash Screen. |
| showPercentage | Boolean | true | Enables showing the progress percentage. |
| loaderVPos | Int/String | ”75%” | Vertical position from top of progress bar. |
| splashVPos | Int/String | ”35%” | Vertical position from top of Splash Screen. |
| splashID | String | ”#jpreContent” | Selected element of Splash Screen Content. |
| splashFunction | Function | null | This function is called once the Splash Screen is created. You can use this to animate the Splash Screen. |
| autoClose | Boolean | true | Should jPreLoader close by itself once preload completed? If no user have to click on button to close the jPreLoader. |
| closeBtnText | String | ”Start!” | Text to be show inside close button if autoClose is false. |
| onetimeLoad | Boolean | false | Should jPreLoader preload images for new user only? (using cookie to check and will expired once user close their browser) |
| debugMode | Boolean | false | Enable this only if you want to check for broken images. |
CALLBACK
You can use callback function once all the loading are completed.
To create Splash Screen, you need to put your Splash Screen code inside your page. After that point the splashID property to your code using id or class attribute (prefer using id). If you wish to have some animation for your Splash Screen, use splashFunction properties to pass your function to jPreLoader (requires basic jQuery knowledge). Anyway, do refer to source files for more details and how it works.
License:
jPreLoader is licensed under the GNU General Public License version 2 or later. That means you do whatever you like to the source code.
Change Log
| Version 2.1 | 07 October 2012 | – #Bug fix: Escape background gradient checking. |
|---|---|---|
| Version 2.0 | 11st July 2012 | – New features added – autoClose, closeBtnText, and onetimeLoad options. – #Bug fix: Content show first before jPreLoader. Fixed using CSS body style. |
| Version 1.0 | 11st January 2012 | – Initial Release |
Archive:
| jPreLoader ver1 | Demo Download |
|---|
Conclusion:
jPreLoader was born during the time I created my latest IQ Game – Cross the Bridge. When I try to search on Google, there are actually not much jQuery plugins available in Internet which able to create a Loading Screen for preloading all the images in your website. Most of them are simply show an animated loading gif during the preloading process. So I decided to create this plugin which is able to do the things mentioned above with nice progress bar and progress percentage. Hope it can help you as well.
If you find a bug or having problem in using jPreLoader, do not hesitate to contact me. I am very much like to hear about the issue. Please feel free to use the COMMENTS FROM below as well.