当前位置: 代码网 > it编程>编程语言>Javascript > 利用javascript解决图片缩放及其优化的代码

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

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

说起ie6,真是让我们这些做前端的人又恨又无奈,许多属性都不支持。可不少用户还在用它,我们也不能无视。为了兼容,我只好跟同事请教了一下,然后针对ie6用js缩放来显示图片并进行了一些细节上的优化。

尽管今天的这个客户网站比较小,对网站性能的要求也不高,但考虑以后可能还会用到这些东西,做优化是个长期学习的过程,我查阅了一些文章,说是如果利用img标签的onload方法来调用函数进行尺寸的修改,对性能的影响比较大,另外,利用 -expression 行为似乎也不可取(以后继续求证吧),所以,最后是采用页面加载时触发。

这段代码利用resizeimage函数判断,并且修改img.width属性,原理比较简单,在这段代码前面我还加了一个对ie6浏览器的判定,除了它以外,我还是让css搞定图片的尺寸。我在代码中没有定义图片的高和宽的数值,这样在缩放时,只要修改其中的一个数值,让另一个数值去自适应,而不是让js去执行等比缩放,这也算是一点点优化吧。我在代码中引用了jquery(因为习惯了),你没必要这样做,我之所以这么写,是在dom元素返回以后可以统一进行函数处理。考虑到客户经常会使用外链的图片,这时,网页的显示速度就受到图片源的影响,所以在页面加载时我先利用css把需要显示的图片隐藏,直到图片缩放后再利用js的方法显示图片,因此,又对ie6做了个hack:
(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com