搜索
您的当前位置:首页img的onload的另类用法_图象特效

img的onload的另类用法_图象特效

时间:2023-12-02 来源:乐玩宠

图片的onload事件,相信大家都经常用到,尤其在控制图片的输出大小的时候。 但onload还有一些特殊的用法。比如说最近我在做ajax,需要在onload的时候加载,一般都会使用window的onload事件,但window的onload事件必须在加载完所有的html元素后才执行(包括所有的图片,如果页面上有图片丢失就麻烦了)。 很多JS的库类,比如说jquery和prototype都有相对的函数来模拟实现。 我们同样可以使用图片的onload方法来实现。 比如:就可以实现了。

小编还为您整理了以下内容,可能对您也有帮助:

关于 火狐 浏览器 的 img 图片 加载 事件 onload 的 问题

这是因为各浏览器内核对于onload事件处理方式不一致所致。

问题描述

页面加载完成后会触发 onload 事件,通常下会使用 window.onload 、 document.body.onload、 HTMLIFrame.onload 方法来处理他;但是各浏览器对页面 onload 事件处理方式并不一致,这些方法可能会导致页面加载完成后无法触事件处理函数。

造成的影响

window.onload 与 document.body.onload 事件相互关系不明确。

IE6 IE7 IE8 中无法通过为属性赋值方式为 IFRAME 元素绑定 load 事件处理函数。

受影响的浏览器

IE6 IE7 IE8 Firefox

问题分析

一、window.onload 与 document.body.onload 事件以及 BODY 标签内的内联 onload 事件,三者相互关系不明确

有关这两个事件在 W3C 指定的规范中并没有说明其区别,由于 window 对象属于 BOM 范畴没有统一规范可依,各浏览器对其在此处的实现存有差异。

在微软的 MSDN 中说明 document.body.onload 属性是 window 的 onload 事件处理程序。其它浏览器厂商并没有对此属性做更细致解释。

分析以下代码:

<button onclick="alert(document.body.onload);">查看本页 document.body.onload 事件</button>

<button onclick="alert(window.onload);">查看本页 window.onload 事件</button>

<button onclick="alert(window.onload===document.body.onload);">查看document.body.onload 事件与 window.onload 事件是否为同一事件</button>

<br />

<script>

document.body.onload = function (){ // 函数 A

document.getElementById("A").innerHTML = "document.body.onload 被触发";

}

window.onload = function (){ // 函数 B

document.getElementById("B").innerHTML = "window.onload 被触发";

}

</script>

<span id="A" style="background:gold"></span>

<span id="B" style="background:gray"></span>

代码中分别对两种 onload 属性赋值了不同的事件处理函数。其中 window.onload 先于 document.body.onload 被定义。如果他们两者使用的是同一事件处理源,则会发生 window 对象中 onload 事件定义被 body 的事件处理函数所覆盖。

实际上个浏览器运行结果如下:

IE6 IE7 IE8 Firefox Chrome Safari Opera

实际运行 window.onload 被触发

document.body.onload 事件函数 函数 B 函数 A 函数 B

window.onload 事件函数 null 函数 B

两者事件处理函数是否一致 Flase Flase true

初步可以看出:

在 IE 中 window.onload 事件函数即使定义了,也会是 null ,它的事件处理函数始终是为 document.body.onload 提供的;

在 Firefox 中 document.body.onload 事件不与 window.onload 事件相同,后者事件函数不会覆盖前者;

在 Chrome Safari Opera 中 document.body.onload 事件处理函数被后声明的 window.onload 事件处理函数覆盖。

为了更明确以上猜测,我们将两个事件处理函数位置对调后再来观察实际效果:

window.onload = function () // 函数 B{

document.getElementById("B").innerHTML = "window.onload 被触发";

}

document.body.onload = function (){ // 函数 A

document.getElementById("A").innerHTML = "document.body.onload 被触发";

}

这次试图使用 document.body.onload 事件处理函数来覆盖 window.onload,实际运行结果如下:

IE6 IE7 IE8 Firefox Chrome Safari Opera

实际运行 document.body.onload 被触发 window.onload .onload 被触发 document.body.onload 被触发

document.body.onload 事件函数 函数 A 函数 A 函数 A

window.onload 事件函数 null 函数 B

两者事件处理函数是否一致 Flase Flase true

可以看出:

无论如何在 IE 中 window.onload 事件函数即使定义了,也会是 null ,它的事件处理函数始终是为 document.body.onload 提供的。

在 Firefox 中 只有 window.onload 事件会触发页面加载完成事件,document.body.onload 只是个由用户扩展的方法,并不触发相应事件处理函数。这也说明了为什么仅在 Firefox 浏览器中,两者"事件"函数均被保留。

在 Chrome Safari Opera 中页面加载完成事件由 document.body.onload 和 window.onload 两者的事件处理函数定义顺序有关,后定义的覆盖之前定义的,两者最终会使用同一事件源函数处理事件内容。

在实际应用中 onload 事件还可能被写在 BODY 标签的属性内,而不在脚本标签中定义他的处理函数。此时代码如下:

<script>

window.onload=function(){

alert("window onload");

}

</script>

<body onload="alert('overridden window onload')">

此用例中首先在脚本标签内为 window.onload 事件附加了处理函数,然后有在 BODY 标签内写入 onload 事件处理代码。如果 BODY 标签内的 onload 事件处理与 window.onload 事件处理不同,就会弹出两次对话框,并且可以根据对话框出现的顺序判断哪个 onload 事件处理在前。反之则只会弹出一个对话框,如果仅出现 "window onload" 字样提示就说明 BODY 标签内 onload 属性无效,如果出现 “overridden window onload” 提示就说明 BODY 标签内 onload 事件与 window.onload 事件为同一事件处理机制,后者覆盖了前者。

各浏览器运行结果如下:

IE6 IE7 IE8 Firefox Chrome Safari Opera

实际运行 ”overridden window onload“

两者均代表 window onload 事件 true

可见,在所有浏览器中均将,BODY 标签内的内联 onload 事件处理等同与 window.onload 事件处理。

结合上文说明可知, Firefox 中 BODY 标签内的 onload 事件属性与脚本标记内写入的 document.body.onload 事件并不一致。

二、IE6 IE7 IE8 中无法通过为属性赋值方式为 IFRAME 元素绑定 load 事件处理函数

某些情况下可能需要为 IFRAME 标记动态添加 onload 监听事件,其实现方法有通常有三种:

直接为 HTMLIFrameElement.onload 属性为 IFRAME 标记赋值事件处理函数

使用 HTMLIFrameElement.setAttribute 方法为 IFRAME 标记赋值事件处理函数

使用事件监听方式为 IFRAME 的 onload 事件绑定处理函数

根据 DOM 规范推荐使用第三种处理方式,但是由于规范在不断修正添加中,浏览器开发时可能相应的标准规范并未出现或者并不完善,这导致了各个版本浏览对此问题的实现差异。

以下将依次分析这三种方式在各浏览器内的处理情况。

1.直接为 HTMLIFrameElement.onload 属性为 IFRAME 标记赋值事件处理函数

分析以下代码:

<body>

<div id="msgA">通过 HTMLIFrameElement.onload 属性动态加入事件处理函数的 IFRAME 没有触发 onload 事件。</div>

<div id="msgB">静态 IFRAME 没有触发 onload 事件。</div>

<br />

<script>

function iframeLoadA(){

document.getElementById("msgA").innerHTML = "通过 HTMLIFrameElement.onload 属性动态加入事件处理函数的 IFRAME 已经触发 onload 事件。";

}

function iframeLoadB(){

document.getElementById("msgB").innerHTML = "静态 IFRAME 已经触发 onload 事件。";

}

window.onload = function (){

var iframeB = document.getElementById("ifarmeB");

var iframeA = document.createElement('iframe');

iframeA.onload = iframeLoadA;

document.body.appendChild(iframeA);

}

</script>

<iframe id="ifarmeB" onload="iframeLoadB()"></iframe>

</body>

页面中存在两个 IFRAME 标记,ifrmaeA 标记为动态生成,并且动态为其 onload 属性赋值了加载完成后的处理函数。而 iframeB 标记则是在页面中静态存在的,其 onload 属性对应的事件处理函数已经被固定写入。

运行此代码,在各个浏览器中效果如下:

IE6 IE7 IE8 Firefox Chrome Safari Opera

HTMLIFrameElement.onload = Function 没有触发 onload 事件 触发 onload 事件

静态 onload 属性定义 触发 onload 事件

可见,在 IE 浏览器中通过 HTMLIFrameElement.onload 属性赋值方式无法响应 IFRAME 标记的 onload 事件。而其他浏览器均支持此写法。

2.使用 HTMLIFrameElement.setAttribute 方法为 IFRAME 标记赋值事件处理函数

将以上代码稍作修改,将 HTMLIFrameElement.onload 赋值语句部分修改为 HTMLIFrameElement.setAttribute方法:

window.onload = function (){

var iframeB = document.getElementById("ifarmeB");

var iframeA = document.createElement('iframe');

iframeA.setAttribute("onload","iframeLoadA()");

document.body.appendChild(iframeA);

}

此时 ifrmaeA 标记的 onload 属性以及事件处理函数被 DOM 标准方法 setAttribute 写入。

运行此代码,在各个浏览器中效果如下:

IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera

HTMLIFrameElement.setAttribute 没有触发 onload 事件 触发 onload 事件

静态 onload 属性定义 触发 onload 事件

可见,在 IE 系列浏览器中仅有 IE8(S) 支持通过 setAttribute 方法为 IFRAME 标记写入 onload 属性以及其事件处理函数。而其他浏览器均支持此写法。

3.使用事件监听方式为 IFRAME 的 onload 事件绑定处理函数

再将以上代码稍作修改,使用 DOM 规范中推荐的事件监听绑定方法为 IFRAME 动态加入 onload 事件处理函数:

function addEvent(eventName,element,fn){

if (element.attachEvent) element.attachEvent("on"+eventName,fn);

else element.addEventListener(eventName,fn,false);

}

window.onload = function (){

var iframeB = document.getElementById("ifarmeB");

var iframeA = document.createElement('iframe');

addEvent("load",iframeA,iframeLoadA);

document.body.appendChild(iframeA);

}

代码中为了兼容 IE 私有的事件绑定方式,封装了名为 addEvent 的处理函数,他为 IE 和其他浏览器提供不同的事件绑定方法,以达到兼容效果。

运行此代码,在各个浏览器中效果如下:

IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera

onload 事件监听绑定 触发 onload 事件

静态 onload 属性定义

此时所有浏览器中为 IFRAME 标记动态绑定的 onload 事件处理方法均生效。

综合以上三种常见情况可以得出结论,除 IE 以外的浏览器均支持对以上三种动态定义 onload 事件处理函数的方法,而所有 IE 系列浏览器对 HTMLIFrameElement.onload 属性的赋值不被支持,他们可以通过 DOM 标准方法 setAttribute 来为 HTMLIFrameElement 类型元素设置 onload 属性,但是由于 IE8 以下版本对 setAttribute 方法支持有限,导致仅 IE8(S) 下生效。最终 IE 浏览器只能通过事件监听方式为 HTMLIFrameElement 类型元素绑定 onload 事件处理函数。

解决方案

统一为 window 对象的 onload 事件绑定函数,避免在 Firefox 中产生 document.body.onload 事件理解歧义。

统一使用 DOM 规范的事件监听方法(或 IE 专有事件绑定方法)为 IFRAME 标记绑定 onload 事件处理函数。

关于javascript里图片img.onload的问题

楼主首先把这个问题理解错了

img.setAttribute('src',''); 你现在已经将src滞空了没发现吗?

我写了一个例子 楼主参考下

<img src="占位符图片" data="/static/images/logo.png" id="img">
<script type="text/javascript">
window.onload = function () {
    var i = document.getElementById('img');
    var img = new Image();
    img.src = i.getAttribute('data');
    img.onload = function () {
        alert(1);
        i.src = img.src;
    }
}
</script>

追问好的,我明白了.谢谢你.分给你了.另外能留一下qq吗,找个高手不容易

追答你留吧

关于javascript里图片img.onload的问题

楼主首先把这个问题理解错了

img.setAttribute('src',''); 你现在已经将src滞空了没发现吗?

我写了一个例子 楼主参考下

<img src="占位符图片" data="/static/images/logo.png" id="img">
<script type="text/javascript">
window.onload = function () {
    var i = document.getElementById('img');
    var img = new Image();
    img.src = i.getAttribute('data');
    img.onload = function () {
        alert(1);
        i.src = img.src;
    }
}
</script>

追问好的,我明白了.谢谢你.分给你了.另外能留一下qq吗,找个高手不容易

追答你留吧

img.onload压缩图片后怎么转成文件流后给后端是空值

img.onload压缩图片后怎么转成文件流后给后端是空值

1、将要压缩的文件放置于同一个文件夹下;2、选定要压缩的文件;3、在其中一个文件上右击,选择添加到压缩文件;4、可修改压缩文件名称,默认保存于当前文件夹,点击确定等待完成即可。把压缩文件弄成文件,你可以使用解压工具进行解压,解压之后就变成文件了,解压工具有很多的。

img onload事件绑定各浏览器均可执行

在需要对img进行onload事件绑定的时候,一般大家都会想到用常规的方法进行事件绑定,如下:
复制代码
代码如下:
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<title>img
onload事件绑定(错误用法)</title>
<script
type='text/javascript'>
window.onload
=
function(){
var
img
=
document.getElementById('imgId');
img.onload
=
function(){
alert(1);
};
};
</script>
</head>
<body>
<img
src='images/06.jpg'
id='imgId'/>
</body>
</html>
此时大家会发现alert(1)并没有执行,这是什么原因呢?特别是在ie和ff浏览器下。
而且在用到jquery插件库的时候会发现,alert除了在ie和Opera浏览器不弹出来外,其他浏览器均弹出来,这是为什么呢?!
主要是window.onload事件是在页面dom元素加载完后执行,也就包括了img图片中src加载完成。那么img.onload
就不会执行了,
因为其是监听img的src是否加载完成。
那么,如何对img图片进行onload事件绑定呢?具体代码如下:
复制代码
代码如下:
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<title>img
onload事件绑定(正确用法)</title>
<script
type='text/javascript'>
window.onload
=
function(){
var
img
=
document.getElementById('imgId');
var
src
=
img.getAttribute('src');
img.setAttribute('src','');
img.onload
=
function(){
alert(1);
};
img.setAttribute('src',src);
};
</script>
</head>
<body>
<img
src='images/06.jpg'
id='imgId'/>
</body>
</html>
这种方法,在各浏览器下均执行alert(1)。
也就是在页面dom元素加载完成后,获得img的dom对象,获得其src属性,再将其src设置为‘'空,然后监听img的onload事件,最后再设置img的src属性即可。

img onload事件绑定各浏览器均可执行

在需要对img进行onload事件绑定的时候,一般大家都会想到用常规的方法进行事件绑定,如下:
复制代码
代码如下:
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<title>img
onload事件绑定(错误用法)</title>
<script
type='text/javascript'>
window.onload
=
function(){
var
img
=
document.getElementById('imgId');
img.onload
=
function(){
alert(1);
};
};
</script>
</head>
<body>
<img
src='images/06.jpg'
id='imgId'/>
</body>
</html>
此时大家会发现alert(1)并没有执行,这是什么原因呢?特别是在ie和ff浏览器下。
而且在用到jquery插件库的时候会发现,alert除了在ie和Opera浏览器不弹出来外,其他浏览器均弹出来,这是为什么呢?!
主要是window.onload事件是在页面dom元素加载完后执行,也就包括了img图片中src加载完成。那么img.onload
就不会执行了,
因为其是监听img的src是否加载完成。
那么,如何对img图片进行onload事件绑定呢?具体代码如下:
复制代码
代码如下:
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<title>img
onload事件绑定(正确用法)</title>
<script
type='text/javascript'>
window.onload
=
function(){
var
img
=
document.getElementById('imgId');
var
src
=
img.getAttribute('src');
img.setAttribute('src','');
img.onload
=
function(){
alert(1);
};
img.setAttribute('src',src);
};
</script>
</head>
<body>
<img
src='images/06.jpg'
id='imgId'/>
</body>
</html>
这种方法,在各浏览器下均执行alert(1)。
也就是在页面dom元素加载完成后,获得img的dom对象,获得其src属性,再将其src设置为‘'空,然后监听img的onload事件,最后再设置img的src属性即可。

javascript的onload回调问题

1、 new Image()只是建立一个Image对象,在给src属性赋值之前,图像并没有加载到内存,所以是不会缓存图像的。

2、drawImage()是放在img的onload事件中执行的,也就是说它不是立即执行的,而是等待img的onload事件发生后(也就是img中的图像被加载到内存后)才执行的。这就好比埋地雷,埋完地雷后地雷是不会立刻爆炸的,埋地雷的人可以紧接着去做其他事(比如去其他地方继续埋雷),只有达到触发条件(比如敌人踩上去了)地雷才会爆炸。表面上埋地雷的动作是发生在前面的,但实际的运行结果(爆炸)却是发生在后面的。程序里也一样,表面上drawImage()是放在给src赋值之前,但它实际上是在src赋值之后才运行的。

3、img.onload严格来讲并不叫回调,而是一个事件过程,就是说当这个事件(onload)发生了,它里面的代码才会执行,而如果事件没发生,那么代码是不会主动运行的。事件过程是面向对象编程的一个主要的逻辑结构,比如说鼠标点击(onclick)就是一个很常用的事件,点了鼠标就执行某个操作,而不点鼠标的时候,代码即使放在那里它也不敢擅自运行的。

jquery如何给img添加onload事件 <img src="img/test.jpg" onload="AutoResizeImage()" />

<script type="text/javascript">

$(document).ready(function(){

$("#test img").attr("onload","AutoResizeImage()");

});

乐玩宠还为您提供以下相关内容希望对您有帮助:

jsimage.onload什么时候用

使用img.onload的一个主要优点是,它可以确保在执行后续操作之前图像已经完全加载。这样可以避免因图像尚未加载完成而导致的布局问题或错误。使用img.onload事件的时机通常是在你设置了图像的src属性之后。这样,当onload事件触发时...

关于 火狐 浏览器 的 img 图片 加载 事件 onload 的 问题

反之则只会弹出一个对话框,如果仅出现 "window onload" 字样提示就说明 BODY 标签内 onload 属性无效,如果出现 “overridden window onload” 提示就说明 BODY 标签内 onload 事件与 window.onload 事件为同一事件处理机制,后者覆盖了前者...

关于javascript里图片img.onload的问题

&lt;img src="占位符图片" data="/static/images/logo.png" id="img"&gt;&lt;script type="text/javascript"&gt;window.onload = function () { var i = document.getElementById('img'); var img = new Image(); ...

jquery如何给img添加onload事件 &lt;img src="img/test.jpg" onload="Auto...

(document).ready(function(){ ("#test img").attr("onload","AutoResizeImage()");});

关于一个图片特效怎么做的。

图片切换的效果,其实就是修改图片的距离。下面提供一个简单的图片切换效果。效果主要做的是无缝切换图片。&lt;style&gt; *{ margin:0; padding:0; list-style:none;} #box{ width:840px; border:1px solid #000; hei...

...方法把这三张图片画下来,如何判断三张图片 onload 完毕怎么写...

img的onload事件。var img=new Image();img.src="a.png";img.onload=onloaded;function onloaded(e){console.log("图片加载完了");}&lt;canvas width="1000" height="600" id="myCanvas" stylle="width:1000px;...

img.onload压缩图片后怎么转成文件流后给后端是空值

img.onload压缩图片后怎么转成文件流后给后端是空值 1、将要压缩的文件放置于同一个文件夹下;2、选定要压缩的文件;3、在其中一个文件上右击,选择添加到压缩文件;4、可修改压缩文件名称,默认保存于当前文件夹,点击确定...

HTML &lt;img&gt; onload事件

有个叫lazyload的jquery插件,是用来实现图片预加载的,你可以试试在它的基础上用jquery的方式添加function方法

请问javascript中img的onload问题?

如果哪天楼主成了构架师了..你想让哪个里是哪个对象那么 它里面就是哪个对象...这里约定俗成的...构架师写的程序...以后楼主也能写了框架成世界公认的就行了..呵呵...祝楼主早日写成属于自己的框架.....

js canvas img.onload不执行

img.onload =function(){     cxt.drawImage(img,x,y,witdh,height);};解决方式:    添加到dom里面     var img = document.createElement('img')...

Top
7.906876s