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

一个客户跟我联系说，刚给他做的网站，显示不正常，我顿时一紧张，这是我独立完成的第一个项目，于是赶紧打开他的网站看了看，没看出什么不正常来。我又问他怎么不正常，他说和交接项目时的效果不一样，晕，交接时要是不正常，项目肯定交接不了啊，干脆让他截个图过来。果然不正常，是他刚上传的一张图片把显示内容的窗口撑开了。查看代码，明明写好了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;
}

赞 (0)

相关推荐

  • 使用RequireJS优化JavaScript引用代码的方法

    RequireJS是一个提高你的javascript代码速度和质量的有效方法,同时它还让你的代码更容易阅读和维护. 在本文中,我会为你介绍RequireJS和应该如何使用它.我们讨论引入文件和定义模块,甚至还会接触优化方面的知识. 简单的说,require.js是一个脚本载入程序,允许你把你的javascript代码独立成文件和模块,同时管理每个模块间的依赖关系. 引入文件 在开始使用RequireJS前,我们需要先下载它的库和Asynchronous Module Definition(AMD

  • JS 网站性能优化笔记

    1. 除去JavaScript注释 除了注释,其他所有的 // or /* */ 注释都可以安全删除,因为它们对于最终使用者来说没有任何意义. 2. 除去JavaScript中的空白区域 如:x = x + 1;  可以简短得写成:x=x+1;  . 3. 进行代码优化 简单的方法如除去暗示的(implied)分号,某些情形下的变量声明或者空回车语句都可以进一步减少脚本代码.一些简略的表达方式也会产生很好的优化,例如: x=x+1; 可以写成: x++; 不过得小心谨慎,不然代码很容易出错. 4

  • Uglifyjs(JS代码优化工具)入门 安装使用

    Uglifyjs(JS代码优化工具)入门 安装使用

    你也可以尝试一下在线版的Uglifyjs: http://sweet.fengyin.name/ 需要先安装node,进入命令行,查看node,npm是否正确安装. 接下来安装UglifyJS,命令如:npm install uglify-js -g 最后别忘了把node和npm添加到环境变量中,我的分别是 C:\Program Files (x86)\nodejs\; C:\Users\taozhou\AppData\Roaming\npm; 现在就可以使用uglifyjs就行压缩了,如 ug

  • JavaScript代码性能优化总结篇

    JavaScript代码性能优化总结篇

    下面是我总结的一些小技巧,仅供参考. 以下代码基本上在jQuery的源码里面都可以看到,如有说得不对的地方,请大家指出. 尽量使用源生方法 javaScript是解释性语言,相比编译性语言执行速度要慢.浏览器已经实现的方法,就不要再去实现一遍了.另外,浏览器已经实现的方法在算法方面已经做了很多优化. 避免全局查找 在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些. 尽量减少循环次数 少一层循环,就能提高数倍性能.如果要对一个数组的每个元素

  • web性能优化之javascript性能调优

    web性能优化之javascript性能调优

    JavaScript 是一个比较完善的前端开发语言,在现今的 web 开发中应用非常广泛,尤其是对 Web 2.0 的应用.随着 Web 2.0 越来越流行的今天,我们会发现:在我们的 web 应用项目中,会有大量的 JavaScript 代码,并且以后会越来越多.JavaScript 作为一个解释执行的语言,以及它的单线程机制,决定了性能问题是 JavaScript 的软肋,也是 web 软件工程师们在写 JavaScript 需要高度重视的一个问题,尤其是针对 Web 2.0 的应用.绝大多

  • nodejs的10个性能优化技巧

    nodejs的10个性能优化技巧

    下面是我们使用Node.js时遵循的10个性能规则: 1. 避免使用同步代码 在设计上,Node.js是单线程的.为了能让一个单线程处理许多并发的请求,你可以永远不要让线程等待阻塞,同步或长时间运行的操作.Node.js的一个显著特征是:它从上到下的设计和实现都是为了实现异步.这让它非常适合用于事件型程序. 不幸的是,还是有可能会发生同步/阻塞的调用.例如,许多文件系统操作同时拥有同步和异步的版本,比如writeFile和writeFileSync.即使你用代码来控制同步方法,但还是有可能不注意

  • js 优化次数过多的循环 考虑到性能问题

    假设要生成一千万个随机数,常规的做法如下: 复制代码 代码如下: var numbers = []; for (var i = 0; i < 10000000; i++) { numbers.push(Math.random()); } 然而,在IE下执行这段代码时,却弹出了一个窗口提示用户是否停止这段脚本.出现这种情况,首先想到的是优化循环体.但明显地,循环体很简单,没什么优化的余地.即使把循环体清空,提示仍然存在.于是,我得出了一个结论:在IE下,一旦循环次数超过了某个特定值,就会弹出停止脚

  • javascript模版引擎-tmpl的bug修复与性能优化分析

    精妙的 tmpl 前端模板类开源的不少,但最属 jQuery 作者 John Resig 开发的 "javascript micro templating" 最为精妙,寥寥几笔便实现了模板引擎核心功能. 它的介绍与使用方式请看作者博客:http://ejohn.org/blog/javascript-micro-templating/ 让我们先看看他的源码: 复制代码 代码如下: (function(){ var cache = {}; this.tmpl = function (st

  • js中if语句的几种优化代码写法

    尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作.也许有人认为if语句就那么简单,能优化到什么程度?但是看看以下的几种方式,你也许会改变看法. 一.使用常见的三元操作符 复制代码 代码如下: if (foo) bar(); else baz(); ==> foo?bar():baz(); if (!foo) bar(); else baz(); ==> foo?baz():bar(); if (foo) return bar(); else return baz

  • js性能优化 如何更快速加载你的JavaScript页面

    确保代码尽量简洁 不要什么都依赖JavaScript.不要编写重复性的脚本.要把JavaScript当作糖果工具,只是起到美化作用.别给你的网站添加大量的JavaScript代码.只有必要的时候用一下.只有确实能改善用户体验的时候用一下. 尽量减少DOM访问 使用JavaScript访问DOM元素很容易,代码更容易阅读,但是速度很慢.下面介绍几个要点:限制使用JavaScript来修饰网页布局,把针对访问元素的引用缓存起来.有时,当你的网站依赖大量的DOM改动时,就应该考虑限制你的标记.这是改用

  • JS代码优化技巧之通俗版(减少js体积)

    JS代码优化技巧之通俗版(减少js体积)

    细读完这篇文章,够你优化大半天的了,关于JS优化方法大都脱离不了这三种方法. (网页总大小为155.k,而JS就占了100.3K) 是时候优化下JS了 关于JS优化的文章已经很多了,大多技术性很强,像什么变量.字符串.类型,就不做介绍了,也不需要介绍,我也不懂,你知道了也没用.大多数站长都是"拿来主义",我只需要告诉JS怎么放,删那里就可以了. 现在的网站都加的有统计代码.分享工具.评论列表.相关文章插件等工具,而要实现强大的功能,必须使用JS文件,正是这些JS插件,再增强了网站功能的

  • Extjs优化(一)删除冗余代码提高运行速度

    Extjs 本身是一个加载慢的JS框架,这个需要程序员的多去优化,之前说过了JS的打包的优化 这次来写写怎么减少冗余代码,也是提高运行速度,包含了1.删除代码通用2.提交表单通用3.初始化Gird通用化 本次只写 删除代码优化 先贴出代码 复制代码 代码如下: /** * 获取个GridPanel的选择的记录 */ function $getGdSelectedIds(grid, idName) { var selRs = grid.getSelectionModel().getSelectio

随机推荐