Skip to content
Version of the QueryLoader by Gaya Kessler. Preload images with ease.
JavaScript HTML CSS
Latest commit a98d0db May 11, 2016 @Gaya Merge pull request #159 from Gaya/fix-example-link
Fixed example link
Failed to load latest commit information.
src add space May 9, 2016
test fix jquery file including Oct 15, 2015
.gitignore .gitignore for stupid DS_Store Aug 27, 2014
.jscsrc add jscs Oct 14, 2015
.jshintrc jshint options Oct 15, 2015
.travis.yml remove old node version Oct 15, 2015
LICENSE Added License info Jul 21, 2014 fixed example link May 11, 2016
bower.json version bump Oct 15, 2015
gulpfile.js formatted gulp Oct 15, 2015
package.json bump and release May 10, 2016
queryloader2.min.js bump and release May 10, 2016


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.