js 客户端动态调整图片宽度 解决方案

一个项目需要动态处理客户端页面中图片的宽度，防止页面被过宽的图片撑变形。

过程就不叙说了。最终代码如下： 

<script language="javascript" type="text/javascript">
    window.onload=function()
    {

         var imgWidthToLimit=580;          //对图片的限制宽度
         var imgCongObj = ImgContainer.getElementsByTagName("IMG");     //获取id为ImgContainer的页面容器（div、table等）中的所有img对象
         for( i=0;i<imgCongObj.length;i++)
         {
            var image = new Image();
            image.src=imgCongObj[i].src;
            image.i=i;
            image.onreadystatechange=function(){ 
                if (image.readyState=="complete") { 
                    var w= parseInt(image.width);
                    if(w>imgWidthToLimit) imgCongObj[this.i].width=imgWidthToLimit;
                }
            } 
            
         }
    }                              
</script>    

 

 

 

 

 

 

参考资料：

<script>
var image = new Image();
image.src = 'http://www.baidu.com/img/logo.gif';
image.onreadystatechange=function(){
if (image.readyState=="complete") {
alert(["图片大小是:",image.width,image.height]);
}
}
</script>

解决了客户端图片没有加载而读取图片宽度时为0的问题。此法不稳定。后来我加到window.onload事件中  一切问题就解决了。