• 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事件中  一切问题就解决了。

  • 相关阅读:
    转:高并发场景下强一致预算/库存扣减方案
    转:Dubbo性能调优参数及原理
    转:java线程状态说明,Jstack线程状态BLOCKED/TIMED_WAITING/WAITING解释
    使用增强学习法之SQ3R主动阅读
    建立实用投资计划
    使用smarty方法实现目标
    主动学习
    小知识
    大脑的处理模式
    真正的随笔
  • 原文地址:https://www.cnblogs.com/zhangsir/p/1246707.html
Copyright © 2020-2023  润新知