利用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 相关文章推荐
在vs2010中调试javascript代码方法
Feb 11 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
一文搞懂redux在react中的初步用法
Jun 09 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 header Content-Type类型小结
2011/07/03 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
python解析文件示例
2014/01/23 Python
python实现中文分词FMM算法实例
2015/07/10 Python
Python中字典映射类型的学习教程
2015/08/20 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
Python xlwt模块使用代码实例
2020/06/10 Python
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
行政办公员自我评价分享
2013/12/14 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
我的求职择业计划书
2014/04/04 职场文书
表彰大会策划方案
2014/05/13 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python