网页中的一些图片技巧:图片预加载先模糊后清楚

一、预加载图片

     在页面加载完毕后,将下面可能用到图片预先加载到缓存中。也就是在用户打开当前页和切换到下一页这个间隙中加载图片,可以得到良好的用户体验。

<body onload=”if(document.images){new Image().src=’/images/nav_logo3.png’}”>

二、图片的先模糊后清晰效果

    这个效果的使用比较多,尤其像图片站、相册等,比如Picasa。要显示一个比较大的图片时,先显示一个尺寸小的或分辨率低图片,当大图加载完毕后再显示大图。到链接中感受一下效果吧,看看里面的图片。 这样的好处显而易见,在等等大图加载之前,让用户了解图片的大概;如果不是这样做,在用户等待加载一个几百K甚至上M的图片时,只能焦急地看着空白。

代码:

<img id="testImage" src="smallImg.jpg" alt="" width="500" height="”500”" />

<script><!--mce:0--></script>

模糊小图片效果

smallimg1
清晰大图:

bigimg

2 评论

发表评论

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