利用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 相关文章推荐
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 Javascript
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简单提示框alert封装函数
2010/08/08 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
php绘制圆形的方法
2015/01/24 PHP
php微信公众平台开发类实例
2015/04/01 PHP
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
Vue组件开发初探
2017/02/14 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
一百行JS代码实现一个校验工具
2019/04/30 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
python中正则表达式的使用详解
2014/10/17 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
python中如何进行连乘计算
2020/05/28 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
高中生班主任评语
2014/04/25 职场文书
高中运动会广播稿
2014/09/16 职场文书
小学数学教学随笔
2015/08/14 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python