登录  /  注册
首页 > web前端 > js教程 > 正文

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

黄舟
发布: 2017-07-26 13:57:06
原创
1376人浏览过

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

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

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

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

<scriptlanguage="JavaScript" type="text/javascript">
<!--varimgObj;function checkImg(theURL){var width,height;var k;imgObj =new Image();    
//创建对象;
imgObj.src = theURL;   
if (typeof(imgObj) =="object"){if ((imgObj.width != 0) && (imgObj.height != 0)){width=imgObj.width; //是否已取得了图像的宽度;       
height=imgObj.height; 
//是否已取得了图像的高度;      
 k=width/height; 
 //获取图像比例值;        
 if(k>=1){         
 if (width>=200){          
 width=200;          
 height=width/k;         
 }}        
 else                
 {if (height>=200){          
 height=200;           
 width=k?height;           
 }          
 }
 showimg(theURL,width,height);       
 }   
 else    
 setTimeout("checkImg(&#39;" + theURL + "&#39;)", 100) 
 //通过Image对象动态装载图片,不可能立即得到图片的宽度和高度,所以每隔100毫秒重复调用检查。
 }
 }
 functionshowimg(theURL,x,y){document.write("<img src="+theURL+""+"   style="max-width:90%"+"height="+y+"border=&#39;0&#39;"+""+"align=&#39;left&#39; alt="JavaScript使用三种方式实现修改图象大小详解" >");}   //-->
 </script>
 <scriptlanguage="javascript">checkImg("Bt0085.jpg");
 </script>
登录后复制

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

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

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

方案二:使用中的ID,定义图的宽度和高度

页面的元素可以定义其显示范围,即图的高度Height和宽度(Width)。处理事件触发时,动态地改变图的两个属性就可达到效果。

<script>
functionshow()   
{var w,h;   
var k;   
var con;  
w=smallslot.width;  
 h=smallslot.height;   
 k=w/h;  
 if(k>=1){         
 if (w>=200){           
 w=200;          
 h=w/k;         
 }}         
 else                
 {if(h>=150){           
 h=150;          
  w=k?h;          
  }           
  }       
  return w;
  }
  </script>
  <img border=0 ID="smallslot" src="4.jpg" onload="javascript:   style="max-width:90%"align="left" alt="JavaScript使用三种方式实现修改图象大小详解" >
  <script languge="javascript">      
   varx=show();   
   </script>
登录后复制

在这段代码中,将处理后的图像的width作为show()函数的返回值。在中用onload事件调用图像的Width。

问题:首页上的图片新闻中图片没有显示,单击地址栏中的“转到”按钮,才能正常显示。实践告诉我又一次失败!因为上网者惟一习惯做的是输入网址、键入回车这两个动作。  在此基础上,笔者做了以下尝试:  (1)和之间加入“”。每隔10秒自动刷新屏幕,结果图片能正常显示,但不断刷屏让视觉很不舒服。  (2)window.location.reload()重新装载页面,可是结果是一直处于装载页面过程中,使网页不能正确显示。  (3),测试能够通过,但如果图像width200px,则页面显示效果为高度超过150。这样如果没有K=width或者K=height的约束,页面效果是不合理的,因此不能采用。

方案三:将中的Onload()事件放到中完成装载页面时事件的触发

仔细分析方案二,笔者发现主要原因是onload事件是页面载入时触发的事件。Onload在元素中使用,当IE解释到此处,需装载页面才能触发“javascript:width=x;”,因此要重新装载页面才能显示图片。另外,Onload()一般用在元素中,预先完成装载页面时触发的事件。所以,我将中的Onload()事件放到了中去,代码如下:

<body onload="window.smallslot.width=show();">
<script>       
function show()           
{…..
//show()       
}
</script>
<img  border=0 ID="smallslot"src="1.jpg" align="left" alt="JavaScript使用三种方式实现修改图象大小详解" >
this is atest! 
登录后复制

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

以上就是JavaScript使用三种方式实现修改图象大小详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号