利用javascript解决图片缩放及其优化的代码


Posted in Javascript onMay 23, 2012

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

说起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; 
}
Javascript 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
javascript 定义新对象方法
Feb 20 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
JavaScript 图像动画的小demo
May 23 #Javascript
JavaScript学习笔记记录我的旅程
May 23 #Javascript
JS中处理与当前时间间隔的函数代码
May 23 #Javascript
自己做的模拟模态对话框实现代码
May 23 #Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 #Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 #Javascript
JavaScript基本编码模式小结
May 23 #Javascript
You might like
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
JS实现多功能计算器
2020/10/28 Javascript
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
django缓存配置的几种方法详解
2018/07/16 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
django 取消csrf限制的实例
2020/03/13 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
应届生.NET方向面试题
2015/05/23 面试题
宠物店的创业计划书范文
2014/01/11 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
新法人代表任命书
2014/06/06 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
三年级作文之小小梦想
2019/12/06 职场文书