带进度条的图片预加载效果

带进度条的图片预加载效果

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2014年7月10日 17:17:23 星期四

 

原理：使用两张图片实现：一张小的缩略图，一张大的高清图，将缩略图拉大到高清图的尺寸（这就是模糊的效果），然后加载高清图片，加载完成修改<img>标签的src。

 

  图片加载效果：

<script type="text/javascript">
        (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();
            }
        })();

    </script>

 

替换图片代码：

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

 

Html代码：

<div><img src="../img/load-image-s.jpg" style="width: 409px; height: 307px;" /></div>

 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2014年7月10日 17:17:23 星期四