JS实现图片加载模糊到清晰

nimaboke 2016-4-3 2945

使用picasa的时候,注意到它首先是显示模糊的图片,然后图片突然变得清晰,这样做有一定的好处——picasa的图片翻页是用javascript实现的,如果直接载入大图,中间势必会有个空档,用户在这中间会感觉很空虚。实际上是在大图下载完显示之前,显示的是缩略图。

[code lang="js"]

<img src="images/playboy-s.jpg" name="myImage" width="960" height="1285" id="myImage" />

<script language="JavaScript" type="text/javascript">
var img = new Image();
img.src = "images/playboy-b.jpg";
img.onload = function() {
document.getElementById('myImage').src = this.src;
}
</script>

[/code]

具体代码如上,其中,playboy-s.jpg是缩略图,playboy-b.jpg是高清图。
最新回复 (0)