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
Latest commit 073215f Gaya Kessler formatted docs
Failed to load latest commit information.
src linefeed
test fix jquery file including
.gitignore .gitignore for stupid DS_Store
.jscsrc add jscs
.jshintrc jshint options
.travis.yml remove old node version
LICENSE Added License info formatted docs
bower.json version bump
gulpfile.js formatted gulp
package.json add jscs to tests
queryloader2.min.js version bump


QueryLoader2 serves the main purpose of pre-loading the images on your website by showing an overlay and a loading bar. It automatically fetches all your images and background images and pre-loads them before showing the web page.

Code Climate Build Status


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

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

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