Skip to content
This repository


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Version of the QueryLoader by Gaya Design. Preload images with ease.

branch: master

QueryLoader v2

QueryLoader v2 is a better version of the old script posted in 2009. It serves the main purpose of preloading the images on your website by showing an overlay and a loading bar. It automatically fetches all your images and background images and preloads them before showing the webpage. QueryLoader currently works with jQuery v1.9 and in IE version > 7, Chrome, Safari and Firefox.

Read the full post here:

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 () {

For support on iOS devices use the following code:

window.addEventListener('DOMContentLoaded', function() {

Install using Bower

bower install queryloader2

Thanks to

ImagesLoaded by desandro -

Basic usage




(string) background color of the loader (in hex). Default: "#000"


(string) background color of the bar (in hex). Default: "#FFF"


(int) Height of the bar in pixels. Default: 1


(string) set the animation type at the end. Options: "grow" or "fade". Default: "fade"


(int) time in miliseconds which the loading has to run. If time has not passed the animation will still show. Default: 500


(boolean) 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


(boolean) Set to true to enable percentage visualising. Default: false


(function) this function is called once the loading and animation are completed. Default: none


(function) this function is called once the loading is completed, before the ending animation. Default: none

Something went wrong with that request. Please try again.