页面加载时，图片由模糊到清晰的效果
原理：先加载的时候显示像素较小的缩略图，加载完后，就像素清晰的大图。
图片加载时由模糊到清晰，道理很简单，实现也很容易。对用户体验上的提升也很大。所以现在被广泛采用。这里就来介绍下。
传统的图片加载。特别是比较绚的网站上会有很多大图。就当前国内的大部分上网环境来说，打开速度很是问题。用户体验也很差。用户对着白色的空背景等半天，才慢慢的刷新出图片。或者现在很多js都是在onload之后执行的。图片没有加载完就不会有动态效果。
哪怕大家用了jquery的.ready()。在动态效果执行的时候，图片还是空的，或者图片只出了一点点，这都是很差的用户体验。
实现图片从模糊到清晰的思路就一个：用两个图片，一个清晰，一个模糊。模糊的图片很小。loading的时候先加载。等页面框架加载完了之后再替换相应图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS实现图片加载模糊到清晰</title>
<style>
#myImag#myImage {width:900px;height:1000px;margin:0 auto;}
</style>
</head>
<body>
<img src="http://wah199.blog.163.com/blog/a_s.jpg" id="myImage" alt="要操作的图片" /><!-- 注意设置图片的大小 -->
<script type="text/javascript">
var img = new Image();
img.src="http://wah199.blog.163.com/blog/a.jpg";
img.onload = function() {
document.getElementById('myImage').src = this.src;
}
</script>
</body>
</html>其 中a_s.jpg 是a图片的small版，比如a图片是900*1000的，那么a图片是 9*10的就行。当然可以稍微大点。这里一定要设置图片大小。因为a_s的默认宽高很小。所以在拉伸后会是一张模糊的图片。在js里loading完a图 片后。再替换掉small版得图片。
//清晰图片
var img_cover = new Image();
img_cover.src = item.cover;
img_cover.onload = function() {
$('.cover').css({ "background-image": "url(" + this.src+ ")"});
}
