说起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解决图片缩放及其优化的代码】的全部内容了,欢迎留言评论进行交流!