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 preloading 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.)

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

How to use:

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.

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.

The post QueryLoader2 – Preload your images with ease appeared first on Gaya Design.

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

(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.

The post QueryLoader – preload your website in style appeared first on Gaya Design.