Look Inside

Plugin updated: New version of jPreLoader launched with new features like auto exit, one time preload and some bugs fixed. See change log for more details.

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.

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.

You are advised to select only a single element as your Splash Screen content. Once the Splash Screen is created, the selected element will be removed from your page.

Use Chrome for better results of debug Mode since Firefox will return ‘none’ if background-image not found.

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 – #Bug fix: Escape background gradient checking. Version 2.0 – 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.