如何在图片下载完后调用JS函数?

culmer 2009-09-17 11:23:49

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

...全文

116 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

culmer 2009-09-18

打赏
举报

其实你们的答案都与我说的不符，不过只能先这样结贴了

culmer 2009-09-17

打赏
举报

调用我是直接循环了多个这样子的<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下客户也没有要求，而且我这个应该不是因为缓存的原因，因为它就一次也没有好过，清缓存也不行

may_white 2009-09-17

打赏
举报

在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>

浴火_凤凰 2009-09-17

打赏
举报

var =document.getElementById("imgid");

img.onload=function(){  //在onload之后



img.style.width="200px";//这里为你想要的宽度

img.style.height="200px";//这里为你想要的高度

}

BeenZ 2009-09-17

打赏
举报



<img id="imgtest" src=.. ></img>

window.onload=function(){  //在页面onload之后得到宽度

   var img=document.getElementById("imgtest");

   alert(img.width);

}

西安风影 2009-09-17

打赏
举报

Javascript实现图片自适应宽度

<img src="http://www.baidu.com/img/baidu_logo.gif" border="0" onload="if(this.width>100)this.width=200" />

toury 2009-09-17

打赏
举报

如果小于单元格尺寸的图片不放大适应单元格尺寸的话，那就判断一下



<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>

toury 2009-09-17

打赏
举报



<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>