ResourceLoader.js

jQuery(document).ready(function($) {
    // $(".gifImg").attr('src', './images/loading.gif');
    /**
     * Created by Jolam on 2014/11/30.
     */

    var ResourceLoader = (function (Config, Util, _, Backbone) {

        var ResourceLoader = function (opts) {
            this.files = opts.files;
            this.loadedCallback = opts.callback;
            this.filesLoaded = 0;
        };

        ResourceLoader.prototype.loadResource = function (url, callback) {
            if (url.indexOf('.png') > 0) {
                var image = new Image();
                image.onload = function () {
                    return callback(null, null);
                };
                image.src = url;
                return;
            }

            var request = new XMLHttpRequest();
            request.open('GET', url, true);

            request.addEventListener('load', function () {
                return callback(null, request.response);
            });
            request.addEventListener('error', function () {
                var statusCode = request.status;
                var statusText = request.statusText;
                var error = new Error(statusText);
                error.status = statusCode;
                return callback(error, request.response);
            });
            request.send();
        };

        ResourceLoader.prototype.load = function () {
            var _this = this;
            for (var i = 0; i < _this.files.length; i++) {
                var url = _this.files[i];
                _this.loadResource(url, function () {
                    _this.filesLoaded += 1;
                    _this.loadedCallback(false, _this.filesLoaded, url);
                    if (_this.filesLoaded >= _this.files.length) {
                        _this.loadedCallback(true, _this.filesLoaded);
                    }
                });
            }
        };

        return ResourceLoader;
    })();
    var gif = $(".gif");
    var fileList = ['./images/sprites.png','./images/sprites_2.png','./images/sprites_3.png','./images/sprites_4.png','./images/sprites_5.png','./images/child_1_bg.png','./images/child_2_bg.png', './images/child_3_bg.png', './images/child_4_bg.png', './images/child_5_bg.png', './images/child_6_bg.png', './images/child_7_bg.png', './images/child_8_bg.png', './images/title.png', './images/sound.png', './images/nosound.png', './images/arrow2.png', "./images/word_1.png", "./images/word_2.png", "./images/word_3.png", "./images/word_4.png", "./images/word_5.png", "./images/word_6.png", "./images/word_7.png", "./images/word_8.png", "./music/bg.mp4"];
    var fileLength = fileList.length;
    var loader = new ResourceLoader({
        files: fileList,
        callback: function(isDone, filesLoaded, url) {
            if(isDone){
                setTimeout(function(){
                    window.location="./main.html";
                },500);
            }else{
                gif.css({
                    'transform' :'translate(0,' + (78 - 78 * filesLoaded / fileLength) + 'px)',
                    '-webkit-transform' :'translate(0,' + (78 - 78 * filesLoaded / fileLength) + 'px)'
                },400);
            }
        }
    });

    loader.load();
});