javascript解决图片缩放问题

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随机数 2012/05/18
• Javascript键盘事件的组合使用 2012/05/18
• 伦敦2012奥运会倒计时代码javascript版 2012/05/12
• js全选/全不选Checkbox函数 2012/05/09
• javascript的cookie相关函数 2012/05/09
• Document对象详细介绍 2012/05/01
• js判断页面是否加载完成的方法 2012/04/30
• IE6浏览网页出现已终止操作的错误提示解决方法 2012/04/28
• js生成随机数 2012/04/25
• JavaScript base64_decode 函数 2012/04/17