带进度条的图片预加载效果
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 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 星期四