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

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

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

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



标签: ,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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