jPreLoader | A Preloading Screen to Preload Images
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.
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 | Default | 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.
so… i pasted the preloader script under the head aswell as the preloader css… the calling script right before the closing body tag.. just like it said but all i get is a white screen? nothing more. when i remove the css link it fixes itself but i have no preloader? just my standard website. im guessing its the first line in the css that controls the body paramater and calls for Display: none, but yea i dunno help please (:
hello, I did all the steps but I get, if I put the css and I do not get anything if I put it freezes and does not load anything, I can do.
Hi Kenny,
I’m using your plugin and must say that I really like it. I ran into some issues lately, however, which I finally was able to track down and fix.
If you use “real” CSS3 gradients (without proprietary browser prefixes like -webkit, -moz, etc.) the plugin will make a GET request to the server, trying to obtain the gradient, which, of course, leads to a 403 “Bad Request”.
In Safari (6.0.3) the issue is even worse as it completely breaks the Web Inspector and makes it impossible to e. g. analyze any mobile website in conjunction with the iPhone simulator that comes together with Xcode and iOS SDK.
I temporarily fixed it by changing “-gradient” to “gradient” in the according if-clause on line 137 in jpreloader.js
Hope this helps someone.
Cheers,
Bernhard
Amazing plugin!
Is there a way to use a full screen background image for the overlay? It is waiting to load all the images before it will show my loader background image.
Thank you
Hi Jason,
Thanks for comment. Unfortunately how jPreLoader works is hide those not yet finish loaded images with an overlay, but not preventing them from loading.
If you set an image in overlay, it will load simultaneously with other. Perhaps you can put your overlay background image HTML on top of the page so that it can be loaded first!
Hi Kenny.
Just wanted to say how fantastic this program is. I’ve already written a similar loading screen, but your use of a self-deleting cookie for the onetimeLoad is really good, and jPreLoader is robust, elegant and effective. You are gifted programmer!
Anyway, just want to report a bug, or at least clarify something that is unclear. In the jpreloader.js script, you can set the option ‘autoClose’ to either boolean true or false. Whatever you put in, the program still doesn’t change, and you still have to click the “Let’s Begin!” button on 100%, even if ‘autoClose’ is set to ‘true’.
In order to get autoClose to work, you need to go to line 28 of script.js, and set the ‘autoClose’ there to ‘true’. To turn off autoClose, you just need to turn it back to boolean false.
It didn’t set me back, but been as you’ve said in your documentation that the configuration array is in .jpreLoader.js it may confuse some users who want to turn off autoClose!
Regardless, this is a beautiful program.
Respect from the UK.
Julian
Hi Julian,
Sorry for being late reply and thanks for comment. I really appreciate it!
My mistake on creating script.js. I should put the plugin configuration scripts inside the HTML itself since the scripts are not mandatory and can be changed accordingly.
Anyway package updated! And thank you again for all the help. =)
Love this loader, lets say I rather have this before my index.html so it loads everything before entering the mainpage. How would i point this to index.html on button click rather than your image page? Thanks!
Is there a way to make this load all external resources (not just images)? For example, I would love it if this script would preload my stylesheets and other external javascript files (or at least load them into cache) as that takes some time, too.
Thank you!
Mark.
I just add this script on my website. This script work fine in all browsers but in IE10 screen stuck at 98%. How can i make it execute it on IE10 any idea please?
Good post. I definitely appreciate this website. Thanks!
Love it. Love it. Love it.
However, I do have one problem.
I have enabled that cookie stuff, setting the value to true .. to enable preloader to load only once during site session but it dont work?
Any help?
Hi Dr,
Did you try your script in server or localhost environment?
Both.
Is setting that line to TRUE only thing I should do to enable cookies and prevent from repeated loading for visitors who already saw animation or is there something else?
Yes. By setting onetimeLoad to true will save a cookies in user browser. Do you mind share your link with me?
This is the best preloader I have ever used. Was pretty easy to setup, and almost as easy to customize. Combine that with some jQuery goodness and I’m well on the way to having an awesome site.
Thanks for the hard work you put into this script.
Hello there,
for some reason, my page will not load when using jpreloader-v2 in IE9/IE10
the loading overlay and splash screen will not disappear, and the loading percentage is stuck at 97%
please help!
Hi, nice script! I found one issue with Chrome, in-case you haven’t already come across this. In CSS if using CSS3 gradient with: background-image, jPreloader tries to load the linear-gradient settings as an image (unsuccessfully). I have changed line #137 to read:
if ($(this).css(‘background-image’).indexOf(‘none’) == -1 && $(this).css(‘background-image’).indexOf(‘-gradient’) == -1 ) {
This way, it doesn’t try to load the background-image if a gradient is being used instead…
Hi Dan,
You got it right! I will update the script. Thanks anyway!
Nice catch, I have the same issue.
It doesnt work for me.. All I get is a text sayin Loading… and I can see the whole page. I had the queryloader2 up and working, but I liked the looks of yours better. :)
Hi Lars, did you use debug mode to test your loader? Perhaps you can share your webpage with me.
Awesome plugin!! this is what I am looking for.
Can i ask a question how to use this preloader with 1 image only without always fade out
Many thanks.
Hi kathryn, you could actually using
onetimeLoadoption to have your preloader to run for only the first time user reach your website.NOW i see that v2 is out…ANd v1 was great but this one is perfecr.thasnks a lo guys!
Hi, is there a way to hide the preload from google search as now it only shows your browser not supported option in google cache or is there a specific toggle for browser support that I am just missing.
Sorry for being late replying, may I know which part is showing browser not supported in your web page?
Its the screenshot saved by google search engine