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

2014-03-07 · 227 chars · 2 min read

所谓的“图片预加载”就是先加载一张不清晰的图片,然后加载一张高清图片,实现由模糊到清晰的渐变。防止页面空白影响用户体验。具体效果请看在线演示

原理其实很简单,使用两张图片实现:一张小的缩略图,一张大的高清图,将缩略图拉大到高清图的尺寸(这就是模糊的效果),然后加载高清图片,加载完成修改<img>标签的 src。

html 代码如下:

<img src="img_s.jpg" style="width: 409px; height: 307px;" />

js 代码如下:

var img = new Image()
$(img).load(function () {
  $('img').attr('src', 'img.jpg')
})
img.src = 'img.jpg'

上面是核心代码。至于进度条等代码,可以右键查看在线演示的源代码。

赞赏

微信