在动态站点上经常需要上传自己的图片,而这些图片的大小是未知的,在显示成缩略图的时候必须进行按比例的缩放才能美观地显示。以最近做的golf网站(http://www.changligolfsales.com)做例子。 该网站需要上传高尔夫产品图片,并以缩略图显示在列表上,站点服务器支持Asp,但不支持aspjpeg之类的生成缩略图组件,所以将上传的图片直接显示成缩略图,就需要按比例缩放了,前提是要获取图片的长宽,第一个想到的方法是在上传的时候通过ADODB.STREAM对象读取图片的长宽信息保存在数据库并在页面生成的时候读取出来计算比例。这个方法明显的缺点是显示每张图片都要在服务器读取数据并计算,消耗资源多了也加上了页面打开时延。 而第二个方法使用Javascript是将计算量转移到了客户端。 原理是在页面载入完成后(onload触发)在客户端使用Javascript读取每张图片的大小并进行缩放。
以上函数对图片进行缩放。 golf网站的每张缩略图的id都设为imgProductItem,如:<img src="<%= imgPath %>" name="imgProductItem" width="150" height="113" border="0" id="imgProductItem" />,里面的150x113就是显示框的最大尺寸,因为处理函数必须在onload完成时运行,所以这里必须设置一定的大小,要不整个页面在载入图片过程中出现排版错乱,到运行了RsizeAllImageById才恢复正常。 添加一个批量操作的函数:
这样在页面的body添加
就可以将所有图片显示成缩略图了。 |
web 网页按比例显示图片 js
最新推荐文章于 2022-10-13 17:01:05 发布
网页图片按比例显示缩略图的Javascript解决方法
2007年06月10日 星期日 下午 11:38