请问关于用JAVASCRIPT时图片跳动的问题，急！！
我在控制图片的时候用到了JAVASCRIPT，想要达到的目的是让它限制在宽300长100以内，如果实际尺寸比这个规定尺寸还小，那么就按它的实际尺寸。具体如下：
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>image.height*3){
if(image.width>300){
ImgD.width=300;
}
}
else{
if(image.height>=100){
ImgD.height=100;
}
}
}
我在具体的约束中是这么写的：
<img src="images/aaa.jpg" name="boss" onload="javascript:DrawImage(this);">
以上程序运行是正常的，但有一个比较讨厌的问题需要解决，就是当第一次打开时图片总是会先显示原来的尺寸，然后再显示规定的尺寸，这样跳来跳去实在不好！
请问各位大虾，有什么方法解决啊？？这个问题要立即解决，请各位帮帮忙啊！！
问题点数：20、回复次数：14Top
1 楼JK_10000（JK）回复于 2004-12-01 17:51:17 得分 2
为什么要将图片拉扯得不象样，
能不能考虑：只定义宽度，让它按比例显示：
<img src="../My%20Documents/My%20Pictures/tuzehui.jpg" width=300 >
（注意：用width=300,不是用style="width:300"）Top
2 楼dj0628（Reed）回复于 2004-12-01 18:23:24 得分 0
楼上的朋友，你难道看不出我给出的代码也是按比例显示的吗？？而且我的代码有一个优点，就是假如图片宽小于300时不会强制把它拉到300，而是让其显示其本来的尺寸。但是我的代码也有一个缺点，那就是我上面提到的：当第一次打开时图片总是会先显示原来的尺寸，然后再显示规定的尺寸，这样跳来跳去的，气死了！！！！！！！Top
3 楼dj0628（Reed）回复于 2004-12-01 18:24:47 得分 0
谁能解决这个跳来跳去的问题啊？？？
各位好心的大哥大姐，帮帮忙吧？？？Top
4 楼JK_10000（JK）回复于 2004-12-01 18:43:48 得分 5
操，用frontpage预览的效果是图片被拉乱了，但是通过页面试问却正常
最好是去测试一下不同的IE版本是否支持这样做。
先隐藏再显示，跳来跳去的效果可能会弱一点
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language=javascript>
function DrawImage(ImgD){
alert();
var image=new Image();
image.src=ImgD.src;
if(image.width>image.height*3){
if(image.width>300){
ImgD.width=300;
}
}
else{
if(image.height>=100){
ImgD.height=100;
}
}
ImgD.style.display="";
}
</script>
<title>New Page 2</title>
</head>
<body >
<img src="../My%20Documents/My%20Pictures/tuzehui.jpg" name="boss" onload="DrawImage(this)" style="display:none">
</body>
</html>
Top
5 楼dj0628（Reed）回复于 2004-12-01 18:58:51 得分 0
这可是商业网站哦，这个问题必须要解决！！
很难吗？？唉……Top
6 楼dj0628（Reed）回复于 2004-12-01 19:04:56 得分 0
楼上的朋友JK_10000(JK)，你的代码运行有错误啊，它会条出一个警告框，但里面什么也没写！
但我不知道错误在哪里，谁能看出来？？Top
7 楼JK_10000（JK）回复于 2004-12-01 20:42:43 得分 0
跳出了个 alert(),
是用来观看如果网速很慢时的效果，
不是错误
去掉就是Top
8 楼dj0628（Reed）回复于 2004-12-02 08:37:58 得分 0
呵呵，不好意思，不知道这个：）
我再试试！！Top
9 楼yifanwu（逸凡）回复于 2004-12-02 10:11:04 得分 10
你这样试试：
将你的源html的这句：
<img src="images/aaa.jpg" name="boss" onload="javascript:DrawImage(this);">
改为：
<img src="images/aaa.jpg" name="boss" onload="javascript:DrawImage(this);" width="0">
这样load的时候就不会显示，更不会出现什么原始大小了。^_^
Top
10 楼dj0628（Reed）回复于 2004-12-02 10:40:18 得分 0
真奇怪，WIDHT="0"，居然也可以显示！！Top
11 楼JK_10000（JK）回复于 2004-12-02 10:42:33 得分 0
<img src="images/aaa.jpg" name="boss" onload="javascript:DrawImage(this);" width="0">
-->>
<img src="images/aaa.jpg" name="boss" onload="javascript:DrawImage(this);" width="1">
0对于width来说，是无效的，相当于没有赋。Top
12 楼dj0628（Reed）回复于 2004-12-02 11:12:52 得分 0
"0对于width来说，是无效的，相当于没有赋。"——其实也未必，我给出两段代码大家可以看到效果并不一样！其中一个没了，一个却还在！
1）----------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<script language="javascript">
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>=500/400){
if(image.width>100){
ImgD.width=100;
ImgD.height=(image.height*100)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
else{
if(image.height>100){
ImgD.height=100;
ImgD.width=(image.width*200)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
</script>
</head>
<body>
<table border="0" width="227" height="96" align="left">
<tr>
<td height="50" width="300">
<img border="0" src="images/2.jpg" onload="javascript:DrawImage(this)" width="0"> </td>
</tr>
<tr>
<td height="50" width="300">
<a href="new_page_0.htm">
<img border="0" src="images/3.jpg" onload="javascript:DrawImage(this)" width="0"></a></td>
</tr>
</table>
</body>
</html>
2）---------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<script language="javascript">
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>image.height*3){
if(image.width>300){
ImgD.width=300;
}
}
else{
if(image.height>=100){
ImgD.height=100;
}
}
}
</script>
</head>
<body>
<table border="0" width="227" height="96" align="left">
<tr>
<td height="100" width="300">
<table border="0" width="263" height="320">
<tr>
<td height="316" width="263">
<img border="0" src="images/2.jpg" onload="javascript:DrawImage(this)" width="0"></td>
</tr>
</table>
<a href="new_page_1.htm">
<img border="0" src="images/2.jpg" onload="javascript:DrawImage(this)" width="0"></a></td>
</tr>
</table>
</body>
</html>Top
13 楼JK_10000（JK）回复于 2004-12-02 11:56:37 得分 3
<img src="../My%20Documents/My%20Pictures/tuzehui.jpg" name="boss" width="0" >
的确是有效果
Top
14 楼dj0628（Reed）回复于 2004-12-02 16:42:12 得分 0
这个问题已经有进展了，如果不出意外我想已经八九不离十了！等我测试两天，如果效果良好的话，就把方法贴给大家，达到的效果如下所述：
把图片放在一个统一的框内（比如宽200高100），并且要求：当图片实际尺寸比这个框大时，则挤压图片（即并非另存为一个缩略图，而只是将图片挤压），但同时会保持其长宽的比例；而当图片比这个框小时，则按它的实际尺寸显示在框内。而且，最重要的是图片不会发生跳动的情况——这也是我发这个帖子的原因：）Top
