想在图片下载完后调用函数使图片的大小能够适应表格而不是把表格撑起来。服务器端我是用asp,循环输出表格和表格里面的图片,现在用的是onload="a()"这样的写法,但是我发现只有小图片才能够使函数好用,大一点的图片就不行,大一点的图片在执行js函数时得到的宽度是0,应该是图片还没下载完全就执行了。请问哪位兄弟有比较好的办法解决?

解决方案 »

  1.   

    Javascript实现图片自适应宽度
    <img src="http://www.baidu.com/img/baidu_logo.gif" border="0" onload="if(this.width>100)this.width=200" />
      

  2.   


    <img id="imgtest" src=.. ></img>
    window.onload=function(){  //在页面onload之后得到宽度
       var img=document.getElementById("imgtest");
       alert(img.width);
    }
      

  3.   

    var =document.getElementById("imgid");
    img.onload=function(){  //在onload之后img.style.width="200px";//这里为你想要的宽度
    img.style.height="200px";//这里为你想要的高度
    }
      

  4.   

    在firefox下有时对于缓存的图片在其onload触发时width=0,所以需要在width为0时重新载入这个图片,直到得到的width不为0.代码如下:<img src="...." onload="resize(this);">
    <script>
    resizeImg=function(o){
        var _Mw=Mw,_Mh=Mh;//Mw和Mh是最大宽和最大高度
        var img=new Image();img.src= o.src;
        if (img.width == 0) {
    var me = this;
    var arg = arguments;
    setTimeout( function () {
    arg.callee.apply(me, arg)
    }, 10)
    }
    .......
    }
    </script>
      

  5.   

    调用我是直接循环了多个这样子的<img>,<img id="<%="product"&rsProducts("ID")%>" src="./images/Products/<%=rsProducts("PicName")%>" onload="setImage(this.id,119,71)">
    setImage里面我写了判断宽度和高度并更改的语句,这个函数是可用的,因为我在下面一个跟这里一样的地方也调用了,完全好用,两者的唯一区别只是这个的图片大,下面调用的图片小。
    1楼的兄弟:我想做的是既要宽度自适应也要高度自适应,虽然不怎么长但也不是一条两条语句的事情,所以也不好直接在图片的onload里写语句,而且我刚测试了一下直接写在大图片里的话也是不好用的,得到的width是0。这一点同我现在的情况是一样的,用在小图片上直接写一条语句输出宽度的话也是可以得到的。
    2楼:因为这个页面里面不是所有的图片都需要自适应,使用window.onload=function(){}这种的不知道怎么能调用特定ID的,请明示,而且我是需要有两处不定个数的循环输出(id是有规律的根据数据库自动生成),这两处里的图片是需要自适应的
    3楼:虽然我没测试能不能用,但对于我这样多个不定个数的两批循环输出图片来说,我想不出来怎么改成适合我这种 情况的
    4楼:好像不太适合我的情况,我是用IE做的,对FF下客户也没有要求,而且我这个应该不是因为缓存的原因,因为它就一次也没有好过,清缓存也不行
      

  6.   


    <html>
    <head>
    <title>图片适应表格单元</title>
    <script>
    function a(img,td){
      img.width=td.offsetWidth;
      img.height=td.offsetHeight;
    }
    </script>
    </head>
    <body>
    <table border=1 width=200 style="table-layout:fixed;word-break:break-all;word-wrap:break-word;">
    <tr><td>sssssssssssssssssssssssssssssssssssssssssssssssssssssssss</td></tr>
    <tr height=40>
    <td width=40><img src='aaa.jpg' onload="a(this,this.parentNode);" /></td>
    </tr>
    <tr height=40>
    <td width=40><img src='bbb.jpg' onload="a(this,this.parentNode);" /></td>
    </tr>
    </table>
    </body>
    </html>
      

  7.   

    如果小于单元格尺寸的图片不放大适应单元格尺寸的话,那就判断一下
    <script>
    function a(img,td){
      img.width=img.width<td.offsetWidth?img.width:td.offsetWidth;
      img.height=img.height<td.offsetHeight?img.height:td.offsetHeight
    }
    </script>