【轉】javascript实现图片缩略与优化

轉自：http://www.liuhui.info/article13.html

 

图片是网页最重要的元素之一，也是最不可控的元素之 一，特别是那些用户可自已上传的图片。这就需要有两种保障，一是保证图片的正常显示但不破坏网页页面，二是保证图片显示的质量与效果，我们在实现上很多都 采用服务端处理，客户端展示图片即可，但这很耗费服务端的处理时间，毕竟处理图片是需要消耗大量资源的，因此很多情况下采用javascript实现图片 缩略，并优化图片的显示。

javascript实现图片缩略最简单的方式是在页面加载完后调用加载一个图片缩略事件，通过指定一个宽度或高度的最大值，判断图片的宽度与高度不超过最大值的前提，这样就能实现图片的自动缩略，如下：

1. <img src="liuhui.jpg" id="img">

 

1. <script type="text/javascript">
2. window.onload = function(){
3.     var size = 600;
4.     var obj = document.getElementById('img');
5.     if (obj.width > obj .height) {
6.         if (obj.width > size) obj.width = size;
7.     } else {
8.         if (obj.height > size) obj.height = size;
9.     }
10.     }
11. </script>

但这种实现有一个问题，就是图片缩略需要在页面加载之后才能处理，这样，如果图片的高度和宽度过大，就会破坏网页页面结构，然后再缩略造成一定的跳跃感，影响页面体验。

注意采用这种方案不能指定图片的高度与宽度，因为高度与宽度不可控，如果指定高度与宽度就会造成图片变形，同时也不能实现缩略的效果。

通过分析上面解决方案存在的页面缩略处理之前由于图片太大造成页面破坏的问题，可以采取这样一种解决方案，先指定图片的宽度与高度，如下：

1. <img src="liuhui.jpg" id="img" height="1" width="1">

这样，不管图片有多大，显示永远只是1个像素的图片，但我们需要显示缩略的正常图片，如果要实现图片的缩略，就需要获取原图的宽度与高度，采用服务端获取图片高度与宽度：

1. <?php
2. list($width,$height) = getimagesize ('liuhui.jpg');
3. ?>
4.  
5. <img src="liuhui.jpg" id="img" height="1" width="1" w="$width" h="$height" >

然后实现javascript缩略，通过高度与宽度的比例算法计划缩略后的显示高度与宽度，保证图片显示的质量与效果。

1. window.onload = function(){
2.     var obj = document.getElementById('img');
3.     var size = 600;
4.     var _width = _height = 0;
5.     if(!obj){return false;}
6.     var width = obj.getAttribute("w") || obj.offsetWidth;
7.     var height = obj.getAttribute("h") || obj.offsetHeight;
8.     if(width >= height ){
9.         if(width>size){
10.              _width=size;
11.              _height = parseInt(size*height/width);
12.         }
13.         obj.width = _width || width;
14.         obj.height = _height || height;
15.     }
16.     if(height > width){
17.         if(height>size){
18.              _height=size;
19.              _width = parseInt((size * width)/height);
20.         }
21.         obj.height = _height || height;
22.         obj.width = _width || width;
23.     }
24. }

实现方法是指定一个图片的宽度与高度的最大值，并与图片的宽度与高度比较，通过比例分别计算缩略的图片宽度与高度。

这种实现的缺点是需要从服务端获取图片的实际高度与宽度，但从整体的角度来看，解决了加载页面缩略处理之前的尴尬情况，同时保证图片的正常加载显示，通过比例缩略保证了图片的质量，提升了图片加载的速度与性能。