onload函数（JavaScript的onload属性）

本文目录

• JavaScript的onload属性
• 页面同时ONLOAD多个函数如何解决呀
• readerfile中的onload函数执行不会阻塞后续代码
• 生命周期函数
• vue.js中怎样用onload事件
• 关于JS中onload调用函数的问题
• 请简要说明一下onload函数的作用以及在jquery中怎样实现与onload函数一样的效果
• js window.onload 加载多个函数和追加函数详解
• window.onload什么时候执行
• 如何用attachEvent给onload添加所需运行的函数.

JavaScript的onload属性

XMLHttpRequest 对象的 onload 回调函数是在异步请求加载完成后所执行的函数，当JavaScript 监测到请求的数据全部传输完成后就会触发该函数。而 open() 函数设置异步请求的 method、URL 和同步方式等参数，执行 open() 后再执行 send() 函数才开始向服务器发送请求。

另外，onload 回调函数实际上是 XHR2 中新加入的功能，部分浏览器可能不支持这个函数名。要避免不兼容的现象，可以使用传统  XMLHttpRequest，如：

//省略其他代码
request.onreadystatechange=function() // 状态改变回调函数
{
  // 判断 request.readyState==4 的效果等同于 onload 
  if(request.readyState==4 && request.status==200)
  {
    // 加载且响应正常完成后执行的代码.... 
  }
}
request.open("GET",url,true); // 打开对象，也可以说是设置参数
request.send(); // 发送请求

还有一些误解需要澄清一下，

1. window.onload 回调函数其实是在页面加载完成后（包括图片内容的显示）才会执行，并不是页面加载的等待过程中就执行。

2. request.open() 并没有发送请求，只是设置一些参数，在 send() 时才会发送（注意不要漏写这条语句），发送后就会进入 readyState **状态，当 readyState 的值有改变就会执行 onreadystatechange 回调函数，当异请求的步数据接收完成（即 readyState 变为 4）后就会执行 onload 回调函数（注意仅在 XHR2 中有效）。

页面同时ONLOAD多个函数如何解决呀

根据问题描述，程序有误，正确是
程序代码《html》
《body onload="function1();function2();function3();"》
《/body》
《/html》
拓展：
1、最简单的调用方式
直接写到html的body标签里面，如下示例：
程序代码《html》
《body onload="function()"》
《/body》
《/html》
2.在JavaScript语句里调用
程序代码《script》
function f1(){...}
window.onload=f1;
《/script》
3.同时调用多个函数(body方式)
程序代码《html》
《body onload="function1();function2();function3();"》
《/body》
《/html》
4.在JavaScript语句中同时调用多个函数
程序代码《script》
function f1(){...}
function f2(){...}
function f3(){...}
function f4(){...}
window.onload=function(){
f1();
f2();
f3();
f4();
}
《/script》
这种调用方式可以用于不太复杂的JavaScript程序中，如果程序函数很多，逻辑比较复杂，可以考虑用另外一种方式。
5.自定义函数式多次调用
程序代码《script》
function f1(){...}
function f2(){...}
function f3(){...}
function f4(){...}
//onload事件侦听函数
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!="function"){window.onload=func;}else{window.onload=function(){oldonload();func();}};
}
//调用方式
addLoadEvent(f1);
addLoadEvent(f2);
addLoadEvent(f3);
addLoadEvent(f4);
《/script》
这种方式调用比较方便，逻辑清晰。
但要注意的问题是，不可以同时混合运用两种调用方式，因为onload事件只有一次。

readerfile中的onload函数执行不会阻塞后续代码

你好，你问的是readerfile中的onload函数执行不会阻塞后续代码吗？readerfile中的onload函数执行不会阻塞后续代码。onload函数是处理文件读取完成后的回调函数。当文件读取完成后，JavaScript引擎会执行onload函数并返回控制权，继续执行后续代码，因此不会阻塞后续代码。

生命周期函数

onLoad函数对页面状态数据的初始化，是生命周期回调—**页面加载。一 个页面只会调用一次。onLoad函数的参数可以接收打开当前页面所调用的 query参数。

当前页面跳转detail页面后，调用query参数id。

detail页面中onLoad函数可以获取传递的query参数id。

onLaunch：在小程序中加载执行，全局只触发一次。

onShow:在小程序中显示，**小程序启动或切前台。

onHide:在小程序中隐藏，**小程序切后台。

onError:小程序发生脚本错误时，或者API调用失败时，会触发onError并带上错误信息。

1. onLoad ：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

2. onShow ：加载完成后、后台切到前台或重新进入页面时触发（页面显示）

3. onReady ：页面首次渲染完成时触发

4. onHide ：从前台切到后台或进入其他页面触发（页面隐藏）

5. onUnload ：页面卸载时触发(页面卸载)

6.onPullDownRefresh：**用户下拉动作(可以用来做下拉刷新功能)

7.onReachBottom：页面上拉触底事件的处理函数（用来做下拉加载更多功能）

8.onShareAppMessage：用户点击右上角转发

9.onPageScroll：页面滚动触发事件的处理函数

10.onResize：页面尺寸发生改变时触发。
页面生命周期小结

基本上加载一个小程序进来之后的执行顺序为 ：

小程序切换后台：

vue.js中怎样用onload事件

1、首先创建一个名称为onload的html文件，如下图所示。

2、设置标题为 javascript  onload，如下图所示。

3、在body标签 中加入onload事件，并在事件中加入自定义函数 myonload。

4、在文档区域加入一个h 元素，加入文本内容“页面加载完成显示页面内容”，当页面加载完成 后 显示该内容。

5、创建一个自定义函数myload，当页面完成后，调用该自定义函数，并加入alert提示语。

6、在浏览器中打开该文件，首先会弹出页面加载完成后调用的myonload函数，在现实页面内容。

关于JS中onload调用函数的问题

在你的onload 方法中可以直接使用后台传过来的值：
《%
String a = request.getAttribute("a");
a=....;
%》

《script type="text/javascript"》
function onload(){
var a = ’《%=a %》’;
}
《/script》

这样a就可以直接使用了，至于你需要a的计算逻辑 可以在代码逻辑里处理。

请简要说明一下onload函数的作用以及在jquery中怎样实现与onload函数一样的效果

onload 函数就是等这个网页加载完了以后才执行里面的js代码，所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.

jquery中等同于onload函数的方法有

$(document).ready(function(){
    //js代码块，如
    $(’div’).click(function(){
        alert(’点击事件’)；
    })
})
//还可以写成
$(function(){
     //js代码块，如
    $(’div’).click(function(){
        alert(’点击事件’)；
    })
})
//这两种都有同一种功能，就是等整个页面加载完成后才执行里面的代码

js window.onload 加载多个函数和追加函数详解

平时做项目
经常需要使用window.onload，
用法如下：
function
func(){alert("this
is
window
onload
event!");return;}
window.onload=func;
或者如下：
window.onload=function(){alert("this
is
window
onload
event!");return;}
但window.onload
不能同时加载多个函数。
比如：
function
t(){
alert("t")
}
function
b(){
alert("b")
}
window.onload
=t
;
window.onload
=b
;
后面会把前面的覆盖，上面代码只会输出
b。
此时可用如下方法解决：
window.onload
=function()
{
t();
b();
}
另一种解决方法如下：
复制代码
代码如下:
function
addLoadEvent(func)
{

var
oldonload
=
window.onload;//得到上一个onload事件的函数

if
(typeof
window.onload
!=
’function’)
{//判断类型是否为’function’,注意typeof返回的是字符串

window.onload
=
func;

}
else
{

window.onload
=
function()
{

oldonload();//调用之前覆盖的onload事件的函数----》由于我对js了解不多,这里我暂时理解为通过覆盖onload事件的函数来实现加载多个函数

func();//调用当前事件函数

}

}
}
//(完整示例)使用如下：
function
t(){
alert("t")
}
function
b(){
alert("b")
}
function
c(){
alert("c")
}
function
addLoadEvent(func)
{

var
oldonload
=
window.onload;

if
(typeof
window.onload
!=
’function’)
{

window.onload
=
func;

}
else
{

window.onload
=
function()
{

oldonload();

func();

}

}
}
addLoadEvent(t);
addLoadEvent(b);
addLoadEvent(c);
//等价于
window.onload
=function()
{
t();
b();
c()
;}

window.onload什么时候执行

在JS中，如果希望在页面加载完成后执行某些操作的话，一般的写法如下：
window.onload = function(){//ToDo};
但是，onload函数的执行并不是我们通常所理解的浏览器构建完html页面对应的DOM树后立刻执行，而是要等到页面中所引用的图片等外部资源 完全下载完成后并且在浏览器中显示才执行，也就是说，如果页面中包括很多图片或者图片很大时将导致onload函数执行时间会被推迟很久，页面中基于 onload的特效或者其它相关内容将并不立刻可用，导致用户体验差。JQUERY的提供了一个自己的类似onload方式，通过该方法实现的页面加载后 执行函数将在浏览器构建完DOM树后立刻执行，而并不需要等待图片等外部资源下载完成。
$(function(){//something to do});
在$(document).ready()执行时，整个DOM文档树已经解析完成，即各个DOM元素都已经可以访问了（但是对于某些元素的某些属性 此时访问可能还不精确，如图片的宽度高度）
而window.onload会在整个文档都加载完成后才会执行，常见的就是对于页面含很多图片的情况下，必须等到图片都下载 下来后才会执行。而$(document).ready()不会。

如何用attachEvent给onload添加所需运行的函数.

一 多个window.onload冲突
在一个页面中有两个JavaScript 分别都用到了window.onload
一个是:window.οnlοad=externallinks，另一个是:window.οnlοad=beijing2008
这样就造成了一个JavaScript 运行不了。
写成这样就可以了window.οnlοad=function(){externallinks();beijing2008();}
还有一种方法，举个例子
《script type="text/javascript"》
function $(obj){return document.getElementById(obj);}
window.οnlοad=function(){
onload2();
onload3();
}
function onload2(){
$("aa").οnclick=function dd(){alert("haha")};
}
function onload3(){
alert("加载完成");
}《/script》
第三种方法：
用window.attachEvent和 window.addEventListener来解决问题了。
当某一事件被触发时需要执行某个函数，在IE下可用attachEvent，在FF下则要用addEventListener。
attachEvent()有两个参数，第一个是事件名称，第二个是需执行的函数；
addEventListener()有三个参数，第一个是事件名称，但与IE事件不同的是，事件不带"on",比如"***ubmit"在这里应为"submit"，第二个是需执行的函数，第三个参数为布尔值；
例如：(可以在IE和FF下分别测试)：
《input type="button" id="ie" value=" IE " /》
《input type="button" id="ff" value=" FF " /》
《script type="text/javascript"》
var isIE = (document.all && window.ActiveXObject && !window.opera) ? true : false;
if(isIE)
{
document.getElementById(’ie’).attachEvent("onclick", Fun);
}
else
{
document.getElementById(’ff’).addEventListener("click", Fun, false);
}
function Fun()
{
if(isIE)
{
alert(’I\’m IE’);
}
else
{
alert(’I\’m Not IE’);
}
}
《/script》
所以我们可以直接这样编写：
if (document.all){
window.attachEvent("onload",调用函数名)//对于IE
}
else{
window.addEventListener("load",调用函数名,false);//对于FireFox
}
二 window.onload 与body onload冲突
onload事件是window对象才有的，《body οnlοad="func"》这样设置只是为了方便，其实仍然是window.οnlοad=func,且window.onload只允许指定一次，冲突是必然的；如果要指定多个，同上的方法
***隐藏网址***
相关资源：...函数绑定到onload事件处理函数上的方法_js的onload多个函数...