JavaScript使用三种方式实现修改图象大小详解

黄舟

发布时间：2017-07-26 13:57:06

2213人浏览过

来源于php中文网

原创

大家知道，丰富多彩的web网络课件离不开图片的支持，图像在增加网页生动性的同时，也增加了网页的大小，使下载速度减慢。在网站中如何让一图片能以适当大小在页面上显示是值得研究的问题。为此，笔者把自己的一些经验写出来供广大从事脚本编写者参考，以此共勉。

需求分析：本网站采用新闻管理系统，首页新闻栏目中，需要从数据库中调用图片文件作为图片新闻中的图片，从而形成文字绕排形式。根据布局需要，图片的宽度不能超过200px。

要让图片能以适当大小显示的问题，实质是一个大图片等比例缩小的问题。如何通过图像的URL获得图像的大小（width,height）是问题的关键，假设k=Width/Height表示图像的比例值，当K>=1时，只要width不超过200px，则height一定=1限定width，K

方案一：使用javascript的Image()对象动态装载图片，获取图片的高度和宽度。



 
 checkImg("Bt0085.jpg");

结果：将代码移植到首页文件（default.asp）中，然后通过服务器测试的时候就出现了问题。输入网址的时候，浏览器中先出现的是已经处理好后的图片，单击工具栏上的“后退”才出现了首页页面内容。再次测试，结果正常。每次更新图片的时候会出现同样的现象，或者每打开一台未访问过本网站的计算机也会出现同样问题。

立即学习“Java免费学习笔记（深入）”；

原因分析：Image()对象的特性，主要用来实现图片翻滚效果，可以将图片提前下载到客户端，让图片之间的切换没有时间延迟。如下边的代码一样，使用 Image对象的 src 属性指定图片的路径 (URL)，这样就将 images 目录下的图片 pic2.gif 下载到客户端了。var myImg = newImage();myImg.src = "pic.gif";

这段代码将迫使浏览器开始从服务器下载指定的图片，如果客户端的缓存 (Cache)中有这个图片的话，浏览器会自动将其覆盖。那样，当用户将鼠标移动到图片上边的时候，图片将会立即变换，不会有时间的延迟。所以如果第一次显示图片后，第二次就能正常显示首页文件就是这个原因了。由此，我得出不能用Image()对象获取图像的属性这一结论，应该改变解决问题的方案。

我要服装批发网

由逍遥网店系统修改而成，修改内容如下：前台商品可以看大图功能后台商品在线添加编辑功能（允许UBB）破解了访问统计系统增加整合了更加强大的第三方统计系统（IT学习者v1.6）并且更新了10月份的IP数据库。修正了后台会员订单折扣金额处理错误BUG去掉了会员折扣价这个功能，使用市场价，批发价。这样符合实际的模式，批发价非会员不可看修正了在线编辑无法使用 “代码&rdqu

下载

方案二：使用 JavaScript使用三种方式实现修改图象大小详解中的ID，定义图的宽度和高度

页面的 JavaScript使用三种方式实现修改图象大小详解元素可以定义其显示范围，即图的高度Height和宽度（Width）。处理事件触发时，动态地改变图的两个属性就可达到效果。


  @@##@@

在这段代码中，将处理后的图像的width作为show()函数的返回值。在 JavaScript使用三种方式实现修改图象大小详解中用onload事件调用图像的Width。

问题：首页上的图片新闻中图片没有显示，单击地址栏中的“转到”按钮，才能正常显示。实践告诉我又一次失败！因为上网者惟一习惯做的是输入网址、键入回车这两个动作。　　在此基础上，笔者做了以下尝试：　　（1）

和之间加入“”。每隔10秒自动刷新屏幕，结果图片能正常显示，但不断刷屏让视觉很不舒服。　　（2）window.location.reload()重新装载页面，可是结果是一直处于装载页面过程中，使网页不能正确显示。　　（3） JavaScript使用三种方式实现修改图象大小详解

200) this.width=200;"align="left">，测试能够通过，但如果图像width200px，则页面显示效果为高度超过150。这样如果没有K=width或者K=height的约束，页面效果是不合理的，因此不能采用。

方案三：将 JavaScript使用三种方式实现修改图象大小详解中的Onload()事件放到中完成装载页面时事件的触发

仔细分析方案二，笔者发现主要原因是onload事件是页面载入时触发的事件。Onload在 JavaScript使用三种方式实现修改图象大小详解 @@##@@ this is atest!　

　再次测试，通过了，而且首页调用成功！我成功了！　　经过这次经历，让笔者感受到了从事程序开发工作的艰辛和乐趣！有时为了一个小小的问题折腾得茶饭不思，但成功的喜悦又让人溢于言表。任何事情只要自己能刻苦钻研、持之以恒，相信问题总会得到解决的。

javascript DOM操作_怎样动态修改页面内容

javascript正则表达式是什么_如何进行模式匹配？

javascript Promise是什么_如何使用then和catch

javascript的Node_js是什么_如何用它构建后端应用

怎么使用javascript操作DOM_有哪些高效的方法可以避免重排？

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载