从模糊到清晰的魔法——渐进加载图片的几种方法总结

zetao1988

于 2012-05-25 10:01:21 发布

阅读量466

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zetao1988/article/details/7600804

本文介绍了一种在响应速度快但带宽有限的网络环境下优化网页加载速度的图像处理技术。通过预置不同尺寸的图片作为快速加载的预览图和原图，以及利用JavaScript实现动态替换图片的技术，有效提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：

预置两张图片：hd.jpg和ld.jpg，分别作为快速加载的预览图和原图，预览图可以采用高压缩率并缩放尺寸，追求一个“小”字。

这种方法适用的网络特点为：响应时间快，但是带宽小，原图尺寸巨大。

<img src="ld.jpg" name="myImage" width="100%" id="myImage"/>
<script language="JavaScript" type="text/javascript">
	var img = new Image();
	img.src = "hd.jpg";
	img.onload = function() {
		document.getElementById('myImage').src = this.src;
	}
</script>

方法二：

待续