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

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

原理其实很简单，使用两张图片实现：一张小的缩略图，一张大的高清图，将缩略图拉大到高清图的尺寸（这就是模糊的效果），然后加载高清图片，加载完成修改<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'

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