JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Query Loader2

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

    • 🔾42%Overall
    • 729
    • 16 days
    • 🕩245
    • 👥7

    QueryLoader2

    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

    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: 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

    Show All