在一些图片搜索网站，像Google，我们经常可以看到这样的效果，当我们搜索并查看一个图片时，可能这个图片看起来是非常模糊的，那么等一会之后呢，发现这个图片变清楚了，那么这个究竟是怎么实现的呢？首先，我想到的是在服务器传送图片的时候，能不能使用类似在线播放视频那种流媒体技术,先把图片的模糊信息传过来，然后再传送剩余的信息。实际上，这个想法是非常可笑的，第一：浏览器在加载图片的时候，就是慢慢的接受服务器传送的数据的，这点在浏览器加载比较大的图片的时候看的很明显，图片就是从上到下慢慢加载完成的，这本来就是流媒体的技术。第二，即使服务器能够做到先传一部分模糊数据过来，那么浏览器这时候已经把模糊数据加载好了，清晰的数据过来了，怎么去把原来的覆盖掉呢？显然，这是不行的。这个想法虽然不行，但是却给了我们一些提示，我们能不能把模糊的数据和清晰的数据分开呢？刚开始请求模糊的数据，过一段时间之后再请求清晰的数据？也就是说，干脆弄两中图片，一张模糊的，一张清晰的，浏览器默认是加载模糊的，等模糊的加载好之后，再去加载清晰的。
这个原理和之前的一片博文网页图片延时加载技术是一样的。
让图片模糊有两种方法，第一种是不改变图片大小，把图片质量降低；第二种是把图片等比例缩小，在网页中用样式指定图片还是为原来的大小。个人推荐第二种方法；下面一个简单的实现代码：
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>图片由模糊到清晰的过度效果</title>
<style>
* {margin:0;padding:0}
img {width:1000px;height:627px;margin:10px auto;display:block}
</style>
</head>
<body>
<img src="small.jpg" alt="小图" originaldata="big.jpg"/>
<script>
var small=document.getElementsByTagName("img")[0];
//当图片加载成功之后
small.onload=function(){
setTimeout(function(){
small.src=small.getAttribute("originaldata")+"?"+Math.random();
//Math.random()用来保证浏览器不换村当前图片，实际项目中应该删除
},3000)
}
</script>
</body>
</html>
这样做的好处主要是节省服务器资源，因为很多用户可能只在这个页面停留一小会儿，没必要去在家这么大的图片去浪费服务器资源。第二点的好处是有一个良好的用户体验，大图片的加载比较慢，通过加载模糊的小图片，告诉用户，这个资源服务器上存在，你只需要等待一小会儿就可以，真正需要这些资源的用户，是不在意短暂的等待的。