Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Version of the QueryLoader by Gaya Kessler. Preload images with ease.
JavaScript HTML CSS
Branch: master
Failed to load latest commit information.
src formatting code
test change paths to relative
.gitignore .gitignore for stupid DS_Store
.travis.yml disable email
LICENSE Added License info add travis badge
bower.json bump version
gulpfile.js serve tests with root
package.json bump version
queryloader2.min.js bump version


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

Code Climate Build Status


QueryLoader currently works in IE version 9+, Chrome, Safari and Firefox.

No dependencies, so no jQuery / Zepto / MooTools needed.

Read the full post here:

View example of how QueryLoader2 works.

Example usage

Include the queryloader2.min.js script (which is in the root of this repository) in the head section of your webpage.

<script src="queryloader2.min.js" type="text/javascript"></script>

Create a QueryLoader2 object like this for example:

<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function() {
        new QueryLoader2(document.querySelector("body"), {
            barColor: "#efefef",
            backgroundColor: "#111",
            percentage: true,
            barHeight: 1,
            minimumTime: 200,
            fadeOutTime: 1000

Use with NPM / Browserify

First install QueryLoader as a dependency in your project:

npm install queryloader2 --save-dev

Use it in a node / browserify project:

var QueryLoader2 = require("queryloader2");

var loader = new QueryLoader2(document.querySelector("body"), {
    barColor: "#efefef",
    backgroundColor: "#111",
    percentage: true,
    barHeight: 1,
    minimumTime: 200,
    fadeOutTime: 1000

jQuery usage

Include jQuery and queryloader2.min.js scripts in the header.

<script src="" type="text/javascript"></script>
<script src="queryloader2.min.js" type="text/javascript"></script>

Call QueryLoader in $(document).ready() like this:

$(document).ready(function () {

Install using Bower

bower install queryloader2

Basic usage

QueryLoader2(element, options);


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

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

barHeight int height of the bar in pixels. Default: 1

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

maxTime int maximum time in milliseconds the loader may take. Go past this time and the loader with automatically close. Default: 10000

fadeOutTime int time in miliseconds it takes for the overlay to fade out at the end. Default: 1000

deepSearch 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

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

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

onProgress function this function is called when an image is loaded. Get parameters percentage, imagesLoaded, totalImages. Default: none

Something went wrong with that request. Please try again.