QueryLoader2 – Preload your images with ease

Gaya Design is back in business and hitting hard with a redo of the 2009 script QueryLoader. I kept getting e-mails and comments about it and thought I had left it just hanging there for way too long. It had become very outdated. So here it is: version 2 of QueryLoader!

QueryLoader2 - Preload your images with ease

Download Download on Github Example See it in action!

A direct link to the zipfile:
https://github.com/Gaya/QueryLoader2/zipball/master

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

What QueryLoader2 does is simply scanning the given elements for images (and background images) and preload them before the website is visible.
This version has been modified to make it easier for users to implement (especially those who are already into jQuery.)

QueryLoader2 currently works with jQuery v1.9.1 and in IE version > 7, Chrome, Safari and Firefox.

How to use QueryLoader2:

Include the script in the head section of your webpage.

<script src="path/to/file/jquery.queryloader2.js" type="text/javascript"></script>

Be sure to add it after you include jQuery.

Now call QueryLoader in a $(document).ready() like this:

$(document).ready(function () {
    $("body").queryLoader2();
});

To make it work for iOS devices, use this code:

window.addEventListener('DOMContentLoaded', function() {
    $("body").queryLoader2();
});

That's it! You're done.

QueryLoader2

queryLoader2( object options );

You can add options to loader.

options
string backgroundColor Background color of the loader (in hex).
string barColor Background color of the bar (in hex).
int barHeight Height of the bar in pixels. Default: 1
bool deepSearch Set to true to find ALL images with the selected elements. If you don't want queryLoader to look in the children, set to false. Default: true.
int barHeight Height of the bar in pixels. Default: 1
bool percentage Set to true to enable percentage visualising. Default is false.
string completeAnimation Set the animation type at the end. Options: "grow" or "fade". Default is "fade".
function onLoadComplete This function is called once the loading is complete. This is handy when changing the animation at the end.
function onComplete This function is called once the loading and animation are completed.

GitHub

As you might have noticed I put my code on GitHub. This makes it easier for me to manage my code and give you updates if you or me find any bugs.
You can also file issues with the script here and fork it to make changes / fix bugs. If you send me pull requests I will take a look as to what you have changed and commit it if it is an addition.

Liked this article? Sharing is caring!