<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS实现图片加载模糊到清晰</title>
</head><body style="text-align:center"> <img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081201272454.jpg" name="myImage" width="960" height="1285" id="myImage" alt="懒人图库" /> <script language="JavaScript" type="text/javascript">
var img = new Image();
img.src = "http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081201272462.jpg";
img.onload = function() {
document.getElementById('myImage').src = this.src;
}
</script>
<p></p>
<p><p>使用picasa的时候，注意到它首先是显示模糊的图片，然后图片突然变得清晰，这样做有一定的好处——picasa的图片翻页是用javascript实现的，如果直接载入大图，中间势必会有个空档，用户在这中间会感觉很空虚。实际上是在大图下载完显示之前，显示的是缩略图。</p></p>
<p></p>
<p> </p>
<p> </p>
</body>
</html> |
注册 登录
