- ×
Version of the QueryLoader by Gaya Design. Preload images with ease.
Filed under application tools › loadersShow AllQueryLoader2
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.
Compatibility
QueryLoader currently works in IE version 9+, Chrome, Safari and Firefox.
No dependencies, so no jQuery / Zepto / MooTools required.
Read the full post here: http://blog.gaya.ninja/articles/queryloader2-preload-your-images-with-ease/
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 }); }); </script>
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="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="queryloader2.min.js" type="text/javascript"></script>
Call QueryLoader in
$(document).ready()
like this:$(document).ready(function () { $("body").queryLoader2(); });
Install using Bower
bower install queryloader2
Basic usage
QueryLoader2(element, options);
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: 1minimumTime
int
time in miliseconds which the loading has to run. If time has not passed the animation will still show. Default: 500maxTime
int
maximum time in milliseconds the loader may take. Go past this time and the loader with automatically close. Default: 10000fadeOutTime
int
time in miliseconds it takes for the overlay to fade out at the end. Default: 1000deepSearch
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: truepercentage
boolean
Set to true to enable percentage visualising. Default: falseonComplete
function
this function is called once the loading and animation are completed. Default: noneonProgress
function
this function is called when an image is loaded. Get parameterspercentage
,imagesLoaded
,totalImages
. Default: none