javascript解决图片缩放及其优化

今天上午，一个客户跟我联系说，刚给他做的网站，显示不正常，我顿时一紧张，这是我独立完成的第一个项目，于是赶紧打开他的网站看了看，没看出什么不正常来。我又问他怎么不正常，他说和交接项目时的效果不一样，晕，交接时要是不正常，项目肯定交接不了啊，干脆让他截个图过来。果然不正常，是他刚上传的一张图片把显示内容的窗口撑开了。查看代码，明明写好了max-width，怎么还会出现这种情况。突然发现他发来的图上，那个浏览器看着不顺眼，像是古老的而神圣的IE6！经过确认，果然是它，又是它！我真是疏忽，没给他在IE6下测试就交工了。

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、网站制作、五莲网络推广、小程序制作、五莲网络营销、五莲企业策划、五莲品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供五莲建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

说起IE6，真是让我们这些做前端的人又恨又无奈，许多属性都不支持。可不少用户还在用它，我们也不能无视。为了兼容，我只好跟同事请教了一下，然后针对IE6用js缩放来显示图片并进行了一些细节上的优化。

尽管今天的这个客户网站比较小，对网站性能的要求也不高，但考虑以后可能还会用到这些东西，做优化是个长期学习的过程，我查阅了一些文章，说是如果利用img标签的onload方法来调用函数进行尺寸的修改，对性能的影响比较大，另外，利用 -expression 行为似乎也不可取（以后继续求证吧），所以，最后是采用页面加载时触发。

 
 
 

  
  
  
function resizeImage(img,width){   
  
  
  
var image=new Image();   
  
  
  
image.src=img.src;   
  
  
  
var temp = image.width;   
  
  
  
img.width = temp = (temp>width)?width:temp;   
  
  
  
img.style.display = "inline";   
  
  
  
}   
  
  
  
function doResize(){   
  
  
  
if($.browser.version==6&&$.browser.msie) $("img").each(function(){resizeImage(this,100)});   
  
  
  
}   
  
  
  
window.onload = doResize; 
 
 
 

这段代码利用resizeImage函数判断，并且修改img.width属性，原理比较简单，在这段代码前面我还加了一个对IE6浏览器的判定，除了它以外，我还是让CSS搞定图片的尺寸。我在代码中没有定义图片的高和宽的数值，这样在缩放时，只要修改其中的一个数值，让另一个数值去自适应，而不是让js去执行等比缩放，这也算是一点点优化吧。我在代码中引用了Jquery（因为习惯了），你没必要这样做，我之所以这么写，是在DOM元素返回以后可以统一进行函数处理。考虑到客户经常会使用外链的图片，这时，网页的显示速度就受到图片源的影响，所以在页面加载时我先利用CSS把需要显示的图片隐藏，直到图片缩放后再利用js的方法显示图片，因此，又对IE6做了个hack:

 
 
 

  
  
  
img{   
  
  
  
display:inline !important;   
  
  
  
display:none;   
  
  
  
max-width:180px;   
  
  
  
}  
 
 
 

原文链接：http://www.cnblogs.com/ilian/archive/2012/05/18/js-img-resize.html

网站名称：javascript解决图片缩放及其优化
文章路径：http://www.shufengxianlan.com/qtweb/news28/28978.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联