利用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 学习笔记(十五)
Jan 28 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
js获取和设置属性的方法
Feb 20 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
基于javascript处理nginx请求过程详解
Jul 07 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脚本加密专家php解密算法
2020/09/13 PHP
php二维码生成
2015/10/19 PHP
PHP函数超时处理方法
2016/02/14 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
详解vue v-model
2020/08/31 Javascript
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Python socket聊天脚本代码实例
2020/01/02 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
Python小白垃圾回收机制入门
2020/06/09 Python
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
教师实习期自我鉴定
2013/10/06 职场文书
运动会四百米广播稿
2014/01/19 职场文书
公务员保密承诺书
2014/03/27 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
python可视化之颜色映射详解
2021/09/15 Python
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫