QueryLoader – preload your website in style

in: DIY, has 686 Comments and is tagged: , , , , , ,

There is always a minor problem when it comes to preloading image on a website. Nobody really has a full solution for it. There are a lot of preloaders available, but most of the time they only display the words: “Loading page” or have an animated image that spins. Why can’t there be a nice loading bar of some kind?
I’ve gotten a few request on how to make a preloader, or people asking me how to get all the images of a web page and preload them (even the images in CSS).

This preloader has it all. Loading bar, custom animations and getting all images included in the web page.

QueryLoader - preload your website in style

Download Get the preloader script! Example See the preloader in action.

(a special shout out goes to Sieb of Siebdesign for coming up with the animation and the idea of building a preloader)

Download the source code here:
http://www.gayadesign.com/scripts/queryLoader/queryLoader.zip

View the example here:
http://www.gayadesign.com/scripts/queryLoader/

Example with percentage visible:
http://www.gayadesign.com/scripts/queryLoaderPercentage/ or download: http://www.gayadesign.com/scripts/queryLoader2/qL2.zip (thanks to Olivier Dumetz)

Features:

  • Preload a whole web page.
  • Preload a part of the page.
  • Gets all images, <img> tags and background-image of your CSS
  • Easy to implement.
  • Adjustable loading bar.
  • Tested in Firefox, Safari, Opera, Chrome, IE7, IE8 and IE6 (script will be ignored in IE6 though).

Implementation:

To implement this script you don’t need any Javascript experience. Just follow these easy steps:

1. Download the zipped archive.

2. Upload the contents to your webserver.

3. Place the following code in thepart of your page:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
<script type='text/javascript' src='js/queryLoader.js'></script>

Remove the jQuery part if you have already included the file.

4. Place this code at the bottom of your page:

<script type='text/javascript'>
QueryLoader.init();
</script>

You are now done!

Customization:

If you only want one element / container to be preloaded you can setup a jQuery selector to only preload what you want.

Let's say you have an element with an id. You only want the images inside that element to be preloaded. You can use the following code:

<script type='text/javascript'>
QueryLoader.selectorPreload = "#idOfTheElement";
QueryLoader.init();
</script>

Be aware that you can only preload a single element. So using a class selector could cause some problems.
To read more about selectors in jQuery you can read this page in the jQuery docs.

To adjust the animations of the loading bar, you can take a look in the following functions:
QueryLoader.animateLoader() and QueryLoader.doneLoad()

Adjusting these functions requires a bit of jQuery knowledge.

Any questions about QueryLoader and implementations can be posted in the comments below.

Good luck and happy developing.

Liked this article? Sharing is caring!

Google Plus

686 Comments on this subject

  9. michael said:

    @thanksjc it looks like you didn’t correctly place the scripts. The code shown in point 3 is best placed in the section of your page. The code in point 4 is best placed at the bottom just before the closing BODY tag.

    Reply to michael
  13. Gaya said:

    Wow! Thanks so much for the sudden interest and the comments people!

    @marco: thanks buddy! glad you liked it :)
    @michael: thanks for answering the question, that’s what I was about to say haha
    @Gauth: there seems to be a broken image on your site. it can’t be loaded so queryloader thinks it is still loading. the image is:
    http://gautch.com/DJ/css/img/12_col.gif (404 error)

    Reply to Gaya
  15. thanksjc said:

    Thanks Michael, but I’m still having trouble. I hate to sound like the newbie and all, but I just can’t get it to work. I have moved the code in point 4 to right before the closing BODY tag, and put the code in point 3 at the beginning of the BODY section. Is this the right section for point 3? I couldn’t tell by what was written. I have however tried other sections of the page’s html but no luck either. Anyway, this script looks killer and I’ve been looking for one like this. I would love to see this working. Thanks.
    Page link: http://www.genesisinvestmentassociates.com/Our_Work.html

    Reply to thanksjc
  17. Gaya said:

    @avram: have you included jQuery? Strange that it gives that error.
    @thanksjc: you have to put the code of step 3 inside your section (code) and the code of step 4 just before I hope it works now :)

    Reply to Gaya
  20. thanksjc said:

    @Gaya & Avram: QUOTE – “Yep, latest jQuery (1.3.2) is loaded just before your .js file.” This was stated above. I have that file uploaded to my server as well, but do I need to do something special with it in terms of this script to make it work. If so, that may be the issue for me because I have not touched any files, just cut and pasted the codes from points 3 & 4 and put them in my page’s html.

    Reply to thanksjc
  24. Avram said:

    I wasn’t using jQuery prior to your script on this website, but it seems that some other script is setting jQ to noConflict mode. Now I have placed $ = jQuery.noConflict(); before calling your init() function and it seems to work now, but it stucks at half. Probably I have some dead images. Will check that.

    Thanks for your help.

    Reply to Avram
  26. Avram said:

    OK, jQ wasn’t working because of Prototype lib, which was loaded after jQ and your script (but before calling init() method). I have fixed that by assigning jQ noConflict to $. But it still stucks at half despite I have only one image on my page (logo.jpg, and it’s present, so no 404 err here). The other issue is – the page actually displays, and when it’s loaded, preloader is displayed. But this is normal (though not as it should be) as init() is called at the end of page, no?

    Reply to Avram
  27. Avram said:

    I can’t find out what’s the problem :(
    You can test it yourself by opening dredovi.info/?preloader

    And little suggestion: You could add some kind of debug mode which would display (below the progress bar) which file is being loaded at the moment? That way we could find and eliminate problems causing preloader to stop at certain point.

    Reply to Avram
  33. Avram said:

    Hello Gaya,

    I have looked a bit around the page with FireBug and found out that, for some reason, your preloader tries to load Google AdSense AD as IMG – have no idea why, as you have properly placed “*:not(script)” selector in your script :/

    Reply to Avram
  37. Yogsototh said:

    Hi, thanks, but it didn’t worked as expected. My web page had the time to show just before the black layer to appear.

    Nonetheless the idea was great, this is why I made my own ( I explain how at http://u.nu/8mue3 )

    The only difference is that I have to add a new ” at the begining of my source code.

    Reply to Yogsototh
  44. Gaya said:

    Hi all! Thanks for the overwhelming interest!
    I’ve been taking the comments in account and updated the script just now. Elements with a src attribute were loaded in QueryLoader but I restricted it to only “img” tags. I recommend that you download the new version.

    Reply to Gaya

Leave your reply

Your email address will not be published. Avatars through Gravatar.

*

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>