onload事件为什么有经常失效？

Question

可能是在触发 onload 事件时,图片还没有加载完毕

Answer 1

这个onload 事件是body的还是image的还是什么元素的事件？

Answer 2

onload='javascript:if(this.width>120)this.width=120;else if(this.height>120)this.height=120;'

Answer 3

原代码
<img src='<%=Rs1("Userface")%>' onload='javascript:if(this.width>120)this.width=120;if(this.height>120)this.height=120;'>

Answer 4

function imgkk() 
{if(this.width>120)this.width=120;if(this.height>120)this.height=120;
}
<img src='<%=Rs1("Userface")%>' onload='imgkk()'/ 
>

失效！

Answer 5

<script> 
function imgkk() 
{if(this.width>120)this.width=120;if(this.height>120)this.height=120;
}</script>

Answer 6

onload
不用这个，用另外一个

Answer 7

还有function imgkk() 
{if(this.width>120)this.width=120;if(this.height>120)this.height=120;
}
你这个写法是错的

Answer 8

this.width在函数里你怎么这么写呢？

Answer 9

<script> 
function imgkk() 
{if(this.width>120)this.width=120;if(this.height>120)this.height=120;
}
</script>肯定失效，this这个时候，指的是window

Answer 10

这样写：<script> 
function imgkk(oImage) 
{
   if(oImage.width>120)oImage.width=120;
   if(oImage.height>120)oImage.height=120;
}
</script><img src='<%=Rs1("Userface")%>' onload='imgkk(this)'/>

Answer 11

this指的不是Image 通过函数传参 

Answer 12

或者你可以给Image加个id,然后用JS定位

Answer 13

按以下顺序:<img id="myimg" src="abc.jpg"/>
<script type="text/javascript">
with(document.getElementById("myimg")){
width=100;
height=100;
}
</script>

Answer 14

建议使用css!!!thumbImage {
     max-width: 50px;
     max-height: 50px;
}
* html .thumbImage {
     width: expression(this.width > 50 && this.width > this.height ? 50 : true);
     height: expresion(this.height > 50 ? 50 : true);
}http://hi.baidu.com/stayalive/blog/item/035a70a9488c97fd1e17a2a8.html

Answer 15

<img src="<%=Rs1("Userface")%>" style="width:expression(this.width > 50 && this.width > this.height ? 50 : true); height: expresion(this.height > 50 ? 50 : true);
">

Answer 16

在标签内书写onload会有兼容性的问题。还有css的expression也有兼容性问题。可以试试这样写：
<img id="img_1" />
<script type="text/javascript">
var imgLoader = new Image();
imgLoader.onload = function(){
    img.src = imgLoader.src;
    if(imgLoader.width > 200)
        img.style.width = "200px";
    if(imgLoader.height > 200)
        img.style.height = "200px";
}
imgLoader.src = "<%=Rs1("Userface")%>";
</script>

Answer 17

Image 的onload 是有问题。你可以在页面底部执行同样的代码，来缩小图片的尺寸。
<script language="javascript">
var img=document.getElementsByTagName("img")
for(var i=0;i<img.length;i++)
{
var image=img[i];
if (image.src.indexOf("图片路径标志")>0 && image.width>447)
{
image.width=447;
break;

}
}
</script>
//==虽然这样效率好像低点，不过就没有onload 不执行的问题了。

Answer 18

我在MSDB看到的解释是

Answer 19

//img.width支持不是很好，所以借助中间对象，且对src的支持好，有时alert(width)的支持会是o, 而alert(this.src)一定会是正确的值,而firFox绝对没有这个问题。具体看我的blog
http://blog.csdn.net/cxzhq2002/archive/2006/11/10/1378012.aspx

Answer 20

<script language="JavaScript"> 
<!-- 
function DrawImage(ImgD){ 
  var image=new Image(); 
  var iwidth = 500; 
//img.width支持不是很好，所以借助中间对象，且对src的支持好，有时alert(width)的支持会是o, 而alert(this.src)一定会是正确的值,而firFox绝对没有这个问题。
  image.src=ImgD.src; 
  if(image.width>500){ 
    ImgD.width=iwidth; 
  }
} 
</script> 
<img src="1.jpg" style="CURSOR: pointer"  onload="DrawImage(this)" onclick="window.open(this.src)"> IE对这种就不稳定，有IE所获得的数据alert(width)有时会是o, 而firFox却不会
<IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src);                   src="1.jpg" 
                        onload="javascript:if(this.width>500){this.resized=true;this.style.width=500;}">
 

Answer 21

<img> onload   事件,可能不支持网页的标准,IMG不支持onload标签怎么办
http://www.pjhome.net/article.asp?id=252

Answer 22

对于缩放，应该在服务器做好。
用 onload的话会闪一下

Answer 23

太简单了吧? 属性用错了而已...
<img src="logo-yy.gif" onload="javascript: if(this.clientWidth > 50) this.width = 50; ">

Answer 24

<script language="JavaScript " type="text/javascript"> 
    //JS控制图片显示的大小（图片等比例缩放） <!-- 
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>= 164/112){ 
   if(image.width>164){
    ImgD.width=164; 
    ImgD.height=(image.height*164)/image.width; 
   }else{ 
    ImgD.width=image.width;
    ImgD.height=image.height; 
   } 
   ImgD.alt=image.width+"x"+image.height; 
  } 
  else{ 
   if(image.height>112){
    ImgD.height=112; 
    ImgD.width=(image.width*112)/image.height; 
   }else{ 
    ImgD.width=image.width;
    ImgD.height=image.height; 
   } 
   ImgD.alt=image.width+"x"+image.height; 
  } 
 }
}
//--> 
</script> <img   src="1.jpg" onload='javascript:DrawImage(this);'/>

Answer 25

onload 我也用过没遇到问题，可能和网络环境有关系上面说的什么写个函数什么的 都是胡扯，不能解决你的问题

Answer 26

<img src="<%=imgsrc%>" onload="javascript:if(this.width>120)this.width=120;if(this.height>120)this.height=120;" 
onerror="javascript:if(this.width>120)this.width=120;if(this.height>120)this.height=120;"/>
最好把
javascript:if(this.width>120)this.width=120;if(this.height>120)this.height=120;
写成一个函数!

Answer 27

<!-- 仅供参考 -->
<html>
    <head>
        <script language="JavaScript">
//获取用于preload的img对象
function getDummyImage(imgSrc) {
    var dummyObj = document.createElement("IMG");
    dummyObj.onload = function() {
        this.onload = null ;
    }
    dummyObj.src = imgSrc;
    return dummyObj;
}//缩放图片，在img.onload时候调用
function zoomImage(elImg, wt, ht) {
    var dimension = getZoomDimension(wt, ht, elImg.src);
    elImg.width  = dimension.width;
    elImg.height = dimension.height;
}//获取尺寸大小
function getZoomDimension(wt, ht, imgSrc) {
    var dimension = new Object();    oImageOriginal = getDummyImage(imgSrc);    wf = oImageOriginal.width;
    hf = oImageOriginal.height;    if (Number(wf / hf) > Number(wt / ht)) {
        dimension.width = wt;
        dimension.height = Number(wt * hf / wf);
    } else {
        dimension.height = ht;
        dimension.width  = Number(ht * wf / hf);
    }
    return dimension;
}//如果图片本身小于指定的尺寸，则按图片的尺寸进行缩放
function getFixedZoomDimension(wt, ht, imgSrc) {
    var dimension = new Object();    oImageOriginal = getDummyImage(imgSrc);    wf = oImageOriginal.width;
    hf = oImageOriginal.height;    if (wt != null && wt > wf)
        wt = wf;
    if (ht != null && ht > hf)
        ht = hf;    if (wt == null)
        wt = Number(ht * wf / hf);
    if (ht == null)
        ht = Number(wt * hf / wf);    if (Number(wf / hf) > Number(wt / ht)) {
        dimension.width = wt;
        dimension.height = Number(wt * hf / wf);
    } else {
        dimension.height = ht;
        dimension.width  = Number(ht * wf / hf);
    }
    return dimension;
}//如果图像长宽和指定的长宽比例不匹配的话会剪切图片的一部分出来填充
//此处略，需要使用style的一些属性来实现
function getClippedZoomDimension(wt, ht, imgSrc) {
}function $(element) {
    if (typeof element == "string")
        return document.getElementById(element);
    else
        return element;
}
window.onload = function() {
    var frameWidth = 200, frameHeight = 50;
    var imgFrame = "test";
    eval('$("' + imgFrame + '").onload = function () { zoomImage(this, ' + frameWidth + ', ' + frameHeight + '); }');
    $("test").src = "http://i.microsoft.com/global/2c3efc5a-10a8-4b05-a56b-c2dc6c5c10e6.jpg";
}        </script>
    </head>
    <body>
        <img width=1 height=1 id=test>
    </body>
</html>

Answer 28

上面的那些函数是为了在js程序里面生成一批缩略图的时候比较方便使用，如：相册封面的缩略等等。
将body替换掉，举例如下：    <body>
        <img   width=1   height=1   id=test>
        <script language="JavaScript">
var albumImgSrcList = ["http://i.microsoft.com/global/2c3efc5a-10a8-4b05-a56b-c2dc6c5c10e6.jpg", 
                       "http://www.baidu.com/img/logo.gif",
                       "http://www.google.cn/intl/zh-CN/images/logo_cn.gif"];
document.write("<table><tr>");
for (var i = 0, iLen = albumImgSrcList.length; i < iLen; i++) {
    document.write("<td style='border: 1px solid #999999' width=100 height=50 align=center valign=middle>");
    document.write("<img height=1 width=1 border=0 onload='zoomImage(this, 99, 49)' src='" + albumImgSrcList[i] + "'");
    document.write("</td>");
}
document.write("</tr></table>");
        </script>
    </body>

Answer 29

补充一下：
1、如果是尺寸超大或文件很大（如一些数码相机的原始图片）的图片进行缩放会占用很大的内存。
2、用document.createElement("IMG")可能会无法释放内存，可采用insertAdjacentHTML的方式创建一个div，在div里面写入img对象（只用一个img对象都可以的），然后再对这个对象赋值。