Pre loader js

loading.js

////////////////////////////////////////////////////////////////////////////////
// loading
////////////////////////////////////////////////////////////////////////////////
;(function(w, d, b) {
    'use strict';

    //--------------------------------------------------------------------------
    //  Variables
    //--------------------------------------------------------------------------
    var isMSIE = /*@cc_on!@*/false;
    var TIMEOUT = 500;
    var PRELOAD = [
        '/cmn/libs/jquery-1.7.2.min.js',
        '/cmn/imgs/001.jpg'
    ];

    var main = document.getElementById('MainContents'),
        prog = document.getElementById('Progress'),
        length = PRELOAD.length;

    main.style.display = 'none';

    //--------------------------------------------------------------------------
    //  Entry point
    //--------------------------------------------------------------------------
    setTimeout(function ()
    {
        loader(PRELOAD);
    }, 400);

    //--------------------------------------------------------------------------
    //  Loader
    //--------------------------------------------------------------------------
    function loader(list)
    {
        var url = list.shift(),
            type = (url.match(/\.js/)) ? 'script' : 'img',
            elm = d.createElement(type),
            timer;

        if (type === 'img')
        {
            elm.style.display = 'none';
            timer = setTimeout(function ()
            {
                onLoaded(elm, timer)();
            }, TIMEOUT);
        }

        elm.onreadystatechange = onReadyStateChange(elm, timer);
        elm.onload = onLoaded(elm, timer);
        elm.onerror = onLoaded(elm, timer);

        elm.src = url;
        b.appendChild(elm);
    }

    //--------------------------------------------------------------------------
    //  Event handler
    //--------------------------------------------------------------------------
    function onReadyStateChange(elm, timer)
    {
        return function ()
        {
            var state = elm.readyState;
            if (state && (state === "complete" || state === "loaded"))
            {
                elm.onload = elm.onerror = elm.onreadystatechange = null;
                onLoaded(elm, timer)();
            }
        }
    }

    function onLoaded(elm, timer)
    {
        return function ()
        {
            clearTimeout(timer);
            elm.onload = elm.onerror = elm.onreadystatechange = null;

            if (elm.parentNode && elm.tagName && elm.tagName.toLowerCase() === 'img')
            {
                b.removeChild(elm);
            }

            progress(PRELOAD.length/length);
            if (PRELOAD.length)
            {
                loader(PRELOAD);
            }
            else
            {
                complete();
            }
        };
    }

    //--------------------------------------------------------------------------
    //  Progress
    //--------------------------------------------------------------------------
    function progress(p)
    {
        if (prog.style.display === 'none')
            prog.style.display = 'block';
        prog.style.width = (_remap(p, 1, 0, 0, 180)>>0) +'px';
    }

    function complete()
    {
        $(d).ready(function()
        {
            InitMethod();
            prog.delay(600).fadeOut(800, function ()
            {
                main.style.display = 'block';
                $(this).remove();
                StartMethod();
            });
        });
    }

    //--------------------------------------------------------------------------
    //  Private Method
    //--------------------------------------------------------------------------
    function _remap(enter, sourceA, sourceB, interA, interB)
    {
        return (enter-sourceA) * ((interB-interA)/(sourceB-sourceA)) + interA;
    }

})(this, document, document.body);