jPreLoader v2

jPreLoader | A Preloading Screen to Preload Images

Written by Kenny on July 11, 2012 jQuery
jPreLoader is a jQuery plugin to create preloading screen to preload all the images in website and attached with customizable splash screen

jPreLoader | A Preloading Screen to Preload Images

jPreLoader v2

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.

jPreLoader works well with jQuery 1.7.1 (others haven’t tested yet) and compatible with IE7 and above, Chrome, Firefox and Safari.

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

NameTypeDefaultDescription
showSplashBooleantrueEnables showing the Splash Screen.
showPercentageBooleantrueEnables showing the progress percentage.
loaderVPosInt/String”75%”Vertical position from top of progress bar.
splashVPosInt/String”35%”Vertical position from top of Splash Screen.
splashIDString”#jpreContent”Selected element of Splash Screen Content.
splashFunctionFunctionnullThis function is called once the Splash Screen is created. You can use this to animate the Splash Screen.
autoCloseBooleantrueShould jPreLoader close by itself once preload completed? If no user have to click on button to close the jPreLoader.
closeBtnTextString”Start!”Text to be show inside close button if autoClose is false.
onetimeLoadBooleanfalseShould jPreLoader preload images for new user only? (using cookie to check and will expired once user close their browser)
debugModeBooleanfalseEnable 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.107 October 2012- #Bug fix: Escape background gradient checking.
Version 2.011st July 2012– New features added – autoClose, closeBtnText, and onetimeLoad options.
– #Bug fix: Content show first before jPreLoader. Fixed using CSS body style.
Version 1.011st January 2012– Initial Release

 

Archive:

jPreLoader ver1Demo 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.


» This Might Interest You «

User Feedbacks (113) Share Your!

  • Very appreciative

    Thank you very very much for this. I installed it, tweaked the colors a bit and it works wonders. Your effort is very appreciated, thank you! :)

    2 months ago! Reply
  • walid

    plz can jpreloader load also js and css files ?

    5 months ago! Reply
  • Robert

    Hi there,

    The jPreLoader seems to load my header jquery fine but makes the images blurry after a few seconds.

    https://mega.co.nz/#!0UNigbzC!vV2EUw7t-BOZ5MzQ6EYlpipo4SH6OGAXypkfxmR2l5A

    How do I go about fixing this?

    Thanks

    6 months ago! Reply
  • Djuka

    Hello,

    does jpreloader.js work with jquery 1.10.x?

    Latest WordPress 3.8 is using jquery 1.10.2 and jquery-migrate.min.js?ver=1.2.1 and I’m loading jpreloader.js after them, but nothing is happening, preloader is not working…

    Anyone knows what I’m doing wrong?

    Thanks!
    Djuka

    8 months ago! Reply
  • Sacha

    Have you experienced difficulties with IE browser? It works perfectly in all browsers but in IE10 preloader shows only when it reaches about 70%. In IE8 it shows briefly only on 100% loaded site. Check it out http://waprecisionsurveys.com.au/cms
    It’s Drupal site.

    8 months ago! Reply
  • Dane

    I’m using the “SimpleKey” wordpress theme on a site I’m developing (http://demo.themevan.com/simplekey/). It uses jPreLoader to preload images and display the percentage loaded.

    I’m attempting to customize the splash screen to illustrate a woman’s hair changing from dark brown to blonde (either filling from the top down, or tweening from one image to the other). I’m loading the images on the #jpreLoader and #jpreBar elements via the CSS “background” property, but I am unsure of the best method for achieving the transition between the images. Can anyone offer help or suggestions? Can I do this purely through CSS, or will I need to modify jpreloader.js? I’m can provide examples of the concept if necessary.

    Thank you for creating such a great tool, and also any help you can provide.

    8 months ago! Reply

Leave a Feedback

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>