想实现一个图片载入的时候，慢慢的渐变的效果

想实现一个图片载入的时候，慢慢的渐变的效果。也就是一开始不清晰，最后清晰了。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

box.html('<div class="loading"></div>');
var src = btn.find('img').attr('src');
var img=new Image();
img.onload=function(){
   box.html("<img src='"+src+"' />").find('img').hide();
   box.find('img').fadeIn(300);
}
img.src=src;具体可以看一下（自己开发的）
http://www.suning.cn/webapp/wcs/stores/servlet/bigImagesView?langId=-7&storeId=10052&catalogId=10051&productId=97292&proNum=6&usePagination=true
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var imgNum = 0;
var rate = 0;//淡化效果函数
var opacity = function() {

if (isIE) {
return function(target, rate) {
target.style.filter = "alpha(opacity=" + (rate * 100) + ")";
};
} else {
return function(target, rate) {
target.style.opacity = rate;
};
}
}();function fadeIn() {

if (rate >= 1) {
clearInterval(imgNum);
}

var img = document.getElementById('test');
opacity(img, rate);
rate += 0.05;
}window.onload = function() {

imgNum = setInterval(fadeIn, 100);
}
</script>
</head>
<body style="text-align:center">
<img id="test" src="D:/noavatar_2.gif"></img>
</body>
</html>
打开一些网上的相册，在加载照片的时候，如果网速比较慢加载慢的话，它会先显示一个类似模糊有点小马赛克的质量比较差的照片，然后慢慢的变为清晰的照片，这样避免了用户在浏览照片的时候页面一片空白的情况，在html中 IMG 有个 lowsrc 属性
<img lowsrc="" src="" width="300" height="200" border="0" />
把图片的缩略图放在lowsrc里面，这样的话因为缩略图是缩小的，按照原图片的比例显示就会有马赛克！
src里填写原图片！
这样的话，原图片比较大，下载的慢，lowsrc的缩略图小加载快，所以会先显示被拉伸的缩略图，等大图下载完成后会显示原图，这样有个时间差，就是出现先由马赛克，然后变清晰的效果！
注意，测试的时候最好在远程服务器上，这样效果比较明显，本机的话，下载太快了，可能感觉不出来！
lowsrc 为预加载图片。
要想实现渐入式效果用jquery 里面的fadeIn就好了。