Native Image Preloader

preloader.js

(function() {
    // extend object prototype
    if (Object.extend === undefined) {
        Object.prototype.extend = function(obj) {
            var _key;

            for (_key in obj) {
                if (obj.hasOwnProperty(_key)) {
                    this[_key] = obj[_key];
                }
            }

            return this;
        };
    }

    var preloader = (function () {
            'use strict';

            return function (options) {
                var opts = {
                        imgs: []
                    },

                    preloaded = [],
                    loaded = [],
                    failed = [],
                    counter = 0,
                    delay = 10,
                    maxTime = 10*10*10*30, // 30 sec.
                    timeCounter = 0,
                    len,
                    hTimer,
                    time,

                    // functions
                    init = function() {
                        var i = 0;

                        // get start time
                        time = new Date().getTime();

                        // create preload array
                        for (i = 0; i < options.imgs.length; i++) {
                            // create image object
                            preloaded[i] = new Image();
                            preloaded[i].src = options.imgs[i];

                            // error handling
                            preloaded[i].onerror = function() {
                                this.isError = 1;
                                this.loaded = 1;
                                counter++;
                            };

                            // mark not loaded initially (0 = not loaded, 1 = loaded)
                            preloaded[i].loaded = 0;
                        }

                        // start length of preload array
                        len = preloaded.length;

                        // call function to check preloads
                        checkPreload();
                    },


                    extend = function(target, source) {
                        var _key;

                        for (_key in source) {
                            if (source.hasOwnProperty(_key)) {
                                target[_key] = source[_key];
                            }
                        }

                        return target;
                    },

                    checkPreload = function() {
                        var i;

                        // if too many iterations
                        if (timeCounter > maxTime) {
                            // execute callback
                            options.done({
                                preloaded: preloaded,
                                loaded: loaded,
                                needed: (new Date().getTime() - time),
                                error: true,
                                msg: 'too many iterations'
                            });

                            return;
                        }

                        timeCounter += delay;

                        // if all images were handled
                        if (counter === len) {
                            // iterate over preload array
                            for (i = (len - 1); i >= 0; i--) {
                                // if image was marked faulty (an error occured during loading)
                                if (preloaded[i].isError == 1) {
                                    // add image to error array
                                    failed[failed.length] = preloaded[i];
                                    // remove image from preload array (necessary?)
                                    preloaded.splice(i, 1);
                                }
                            }

                            // execute callback
                            options.done({
                                preloaded: preloaded,
                                loaded: loaded,
                                failed: failed,
                                needed: (new Date().getTime() - time),
                                error: false
                            });

                            return;
                        }

                        // iterate over preload array
                        for (var i = 0; i < len; i++) {
                            // if an image is ready (loaded) in this iteration
                            // if ((preloaded[i].loaded === 0) && (preloaded[i].width > 0)) {
                            if ((preloaded[i].loaded === 0) && (preloaded[i].complete)) {
                                preloaded[i].loaded = 1;
                                // add loaded image to array
                                loaded.push(preloaded[i]);
                                counter++;
                                checkPreload();
                                return;
                            }
                        }

                        // execute preload function periodically
                        hTimer = window.setTimeout(function() {
                            checkPreload();
                        }, delay);
                    };

                options.done = options.done || function (data) {
                    console.log("done: ", data);
                };

                options.fail = options.fail || function (data) {
                    console.log("fail: ", data);
                };

                if (Object.extend === undefined) {
                    extend(opts, options);
                } else {
                    opts.extend(options);
                }

                init();
            };
        })(),  // END: preloader function

        imgs = [
            "https://img1.jpg",
            "https://img2.jpg",
            "https://img3.jpg",
            "https://img4.jpg",
            "https://img5.jpg",
            "https://img6.jpg",
            "https://img7.jpg"
        ];

    // execute preloader
    preloader({
        imgs: imgs,
        done: function(data) {
          console.log("data: ", data);
        }
    });

})();