zoukankan      html  css  js  c++  java
  • 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事件中  一切问题就解决了。

  • 相关阅读:
    tuple 元组及字典dict
    day 49 css属性补充浮动 属性定位 抽屉作业
    day48 选择器(基本、层级 、属性) css属性
    day47 列表 表单 css初识
    day 46 http和html
    day 45索引
    day 44 练习题讲解 多表查询
    day 40 多表查询 子查询
    day39 表之间的关联关系、 补充 表操作总结 where 、group by、
    day38 数据类型 约束条件
  • 原文地址:https://www.cnblogs.com/zhangsir/p/1246707.html
Copyright © 2011-2022 走看看