渐进式jpg和交错式gif png图片的实现方法(网站图片从模糊到清晰的实现方法)
浏览数:3248 时间:2013-11-28
渐进式jpg和交错式gif png图片的实现方法(网站图片从模糊到清晰的实现方法)
有同学问,网站相册里的图片是怎么从模糊变的清晰的?其实,这是图片的渐进和交错,显示时先大概显示图像的草图,当文件全部下载后再填充细节。这起到一种很有意义的心理效果,因为这样使人们有东西可看,而不必坐着干等大型图像慢慢显示在屏幕上。
在html中 IMG 有个 lowsrc 属性<img lowsrc=”" src=”" width=”300″ height=”200″ border=”0″ />把图片的缩略图 放在lowsrc里面,这样的话因为缩略图是缩小的,按照原图片的比例显示就会有马赛克!src里填写 原图片!这样的话,原图片比较大,下载的慢,lowsrc的缩略图小加载快,所以会先显示被拉伸的缩略图,等大图下载完成后会显示原图,这样有个时间差,就是出现先由马赛克,然后变清晰的效果!注意,测试的时候最好在远程服务器上,这样效果比较明显,本机的话,下载太快了,可能感觉不出来。
首先在上传文件的时候,用PHP 的GD库来生成缩略图。
不过,经测试 img 的lowsrc属性好像没有什么用,下面是我写的代码。
其中:10.jpg是缩略图,1.jpg是原图。
1 2 3 4 5 6 7 8 | <img src="10.jpg" name="myImage" width="501" height="552" id="myimage" /> <script type="text/javascript"> var img = new Image(); img.src = "1.jpg"; img.onload = function() { document.getElementById('myimage').src = this.src; } </script> |
友情链接