带滚动条的图片预加载效果

(function () {
    var timing = function () {
        this._timer = null;
        this._percent = 0;
        this._isLoading = false;
        this._isPause = false;
        this._step = 2;
    };

    timing.prototype = {
        start: function (url, obj) {
            var self = this;
            self._percent = 0;

            self._loadImg(url);

            self._timer = setInterval(function () {
                self._judge(url, obj);
                self._scroll();
            }, 30);
        },
        _pause: function () {
            this._isPause = true;
            this._step = 0;
        },
        _restart: function () {
            this._isPause = false;
            this._step = 3;
        },
        _scroll: function () {
            $('.loading-progress').width(this._percent + "%");
            this._percent += this._step;
        },
        _loadImg: function (url) {
            var self = this;
            var img = new Image();
            $(img).load(function () {
                setTimeout(function () {//模拟加载
                    self._isLoading = true;
                }, 2000);
            });
            img.src=url;
        },
        _judge: function (url, obj) {
            if (this._percent >= 70 && !this._isLoading) {
                this._pause();
            }
            if (this._percent >= 70 && this._isLoading && this._isPause) {
                this._restart();
            }
            if (this._percent >= 100) {
                obj.attr("src", url);
                this.destroy();
            }
        },
        destroy: function () {
            this._percent = 0;
            clearInterval(this._timer);
            $('.loading').hide();
        }
    }

    if (typeof window.timing == 'undefined' || window.timing == null) {
        window.timing = new timing();
    }
})();

$(function () {
    timing.start('../img/load-image.jpg', $("img").eq(0));
});