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

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

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

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



标签: ,

无觅相关文章插件,快速提升流量