star/solar/js/index.js

(function ($) {

    // Creating a number of jQuery plugins that you can use to
    // initialize and control the progress meters.

    $.fn.progressInitialize = function () {

        // This function creates the necessary markup for the progress meter
        // and sets up a few event listeners.


        // Loop through all the buttons:

        return this.each(function () {

            var button = $(this),
                progress = 0;

            // Extract the data attributes into the options object.
            // If they are missing, they will receive default values.

            var options = $.extend({
                type: 'background-horizontal',
                loading: 'Loading',
                finished: 'Done'
            }, button.data());

            // Add the data attributes if they are missing from the element.
            // They are used by our CSS code to show the messages
            button.attr({'data-loading': options.loading, 'data-finished': options.finished});

            // Add the needed markup for the progress bar to the button
            var bar = $('<span class="tz-bar ' + options.type + '">').appendTo(button);


            // The progress event tells the button to update the progress bar
            button.on('progress', function (e, val, absolute, finish) {

                if (!button.hasClass('in-progress')) {

                    // This is the first progress event for the button (or the
                    // first after it has finished in a previous run). Re-initialize
                    // the progress and remove some classes that may be left.

                    bar.show();
                    progress = 0;
                    button.removeClass('finished').addClass('in-progress')
                }

                // val, absolute and finish are event data passed by the progressIncrement
                // and progressSet methods that you can see near the end of this file.

                if (absolute) {
                    progress = val;
                }
                else {
                    progress += val;
                }

                if (progress >= 100) {
                    progress = 100;
                }

                // if(finish){
                //
                //     button.removeClass('in-progress').addClass('finished');
                //
                //     bar.delay(500).fadeOut(function(){
                //
                //         // Trigger the custom progress-finish event
                //         button.trigger('progress-finish');
                //         setProgress(0);
                //     });
                //
                // }

                setProgress(progress);
            });

            function setProgress(percentage) {
                bar.filter('.background-horizontal,.background-bar').width(percentage + '%');
                bar.filter('.background-vertical').height(percentage + '%');
            }

        });

    };

    // progressStart simulates activity on the progress meter. Call it first,
    // if the progress is going to take a long time to finish.

    $.fn.progressStart = function () {

        var button = this.first(),
            last_progress = new Date().getTime();

        if (button.hasClass('in-progress')) {
            // Don't start it a second time!
            return this;
        }

        button.on('progress', function () {
            last_progress = new Date().getTime();
        });

        // Every half a second check whether the progress
        // has been incremented in the last two seconds

        var interval = window.setInterval(function () {

            if (new Date().getTime() > 2000 + last_progress) {

                // There has been no activity for two seconds. Increment the progress
                // bar a little bit to show that something is happening

                button.progressIncrement(5);
            }

        }, 500);

        button.on('progress-finish', function () {
            window.clearInterval(interval);
        });

        return button.progressIncrement(10);
    };

    $.fn.progressFinish = function () {
        return this.first().progressSet(100);
    };

    $.fn.progressIncrement = function (val) {

        val = val || 10;

        var button = this.first();

        button.trigger('progress', [val])

        return this;
    };

    $.fn.progressSet = function (val) {
        val = val || 10;

        var finish = false;
        if (val >= 100) {
            finish = true;
        }

        return this.first().trigger('progress', [val, true, finish]);
    };

    // This function creates a progress meter that
    // finishes in a specified amount of time.

    $.fn.progressTimed = function (seconds, cb) {

        var button = this.first(),
            bar = button.find('.tz-bar');

        if (button.is('.in-progress')) {
            return this;
        }

        // Set a transition declaration for the duration of the meter.
        // CSS will do the job of animating the progress bar for us.

        bar.css('transition', seconds + 's linear');
        button.progressSet(99);

        window.setTimeout(function () {
            bar.css('transition', '');
            button.progressFinish();

            if ($.isFunction(cb)) {
                cb();
            }

        }, seconds * 1000);
    };

    function PreLoad(imgs, options) {
        this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
        this.opts = $.extend({}, PreLoad.DEFAULTS, options);

        if (this.opts.order === 'ordered') {
            this._ordered();
        } else {
            this._unordered();
        }
    }

    PreLoad.DEFAULTS = {
        order: 'unordered', //无序预加载
        each: null, //每张图片加载完毕后执行
        all: null // 所有图片加载完毕后执行
    };
    PreLoad.prototype._ordered = function () {
        var imgs = this.imgs,
            opts = this.opts,
            count = 0,
            len = imgs.length;

        function load() {
            var imgObj = new Image();

            $(imgObj).on('load error', function () {
                opts.each && opts.each(count);
                if (count >= len) {
                    //所有图片全部加载完成
                    opts.all && opts.all();
                } else {
                    load();
                }

                count++;
            });

            imgObj.src = imgs[count];
        }

        load();
    };
    PreLoad.prototype._unordered = function () {//无序加载

        var imgs = this.imgs,
            opts = this.opts,
            count = 0,
            len = imgs.length;

        $.each(imgs, function (i, src) {
            if (typeof src != 'string') return;

            var imgObj = new Image();

            $(imgObj).on('load error', function () {

                opts.each && opts.each(count);

                if (count >= len - 1) {
                    opts.all && opts.all();
                }
                count++;
            });

            imgObj.src = src;
        });
    };


    $.extend({
        preLoad: function (imgs, opts) {
            new PreLoad(imgs, opts);
        }
    });

})(jQuery);