JS:window.onload的使用介绍

1、最简单的调用方式
直接写到html的body标签里面，如：


代码如下:

<html>
<body onload="func()">
</body>
</html>

2、在JS语句调用


代码如下:

<script type="text/javascript">
function func(){……}
window.onload=func;
</script>

3、同时 调用多个函数
直接写到html的body标签里面,如：


代码如下:

<html>
<body onload="func1();func2();func3();">
</body>
</html>

4、js调用多个函数,以下这种调用方式可以用于不太复杂的JS程序中，如果程序函数很多，逻辑比较复杂，可以考虑用第五种方式。


代码如下:

<script type="text/javascript">
function func1(){……}
function func2(){……}
function func3(){……}
window.onload=function(){
func1();
func2();
func3();
}
</script>

5、JS自定义函数式多次调用


代码如下:

<script type="text/javascript">
function func1(){……}
function func2(){……}
function func3(){……}
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!="function"){
window.onload=func;
}
else{
window.onload=function(){
oldonload();
func();
}
}
}
addLoadEvent(func1);
addLoadEvent(func2);
addLoadEvent(func3);
</script>

赞 (0)

相关推荐

  • jquery $(document).ready() 与window.onload的区别

    jquery $(document).ready() 与window.onload的区别

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个          $(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法 window.onload没有简化写法          $(documen

  • window.onload 加载完毕的问题及解决方案（下）

    接上篇,其它方法: 一.在IE中还可以在onreadystatechange事件里进行判断 http://www.thefutureoftheweb.com/blog/adddomloadevent 这里有Jesse Skinner写了一段独立的脚本函数来解决各种浏览器的onload问题,. http://img.jb51.net/jslib/adddomloadevent.js 复制代码 代码如下: /* * (c)2006 Jesse Skinner/Dean Edwards/Matthia

  • jquery中的$(document).ready()与window.onload的区别

    所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>"; } 解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQu

  • js 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("

  • 浅析document.ready和window.onload的区别讲解

    Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作,这个问题在"javascript执行顺序里"http://www.jb51.net/article/44577.htm一文里有详细介绍. jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行.比如在"jQuery基础 - 如何开始"一文里,我用到如下jQuery代码: 复制代码 代码如下: <!--   $(document).ready(

  • window.onload绑定多个事件的两种解决方案

    前言 有些函数,必须在网页加载完毕后执行.比如:涉及DOM操作的. 网页加载完毕时会触发一个onload事件,将函数绑定到这个事件上即可. 复制代码 代码如下: window.onload = myFunction; 问题来了:如果需要同时绑定多个事件,该如何处理呢?有两种解决方法 方案一 创建一个匿名函数,来容纳需要绑定的多个事件,再讲这个匿名函数绑定到onload事件上 window.onload = function(){ firstFunction(); secondFunction()

  • 页面中body onload 和 window.onload 冲突的问题的解决

    1.使用attachEvent给onload添加所需运行的函数 复制代码 代码如下: if (document.all) { window.attachEvent('onload', FuncName) } else { window.addEventListener('load', FuncName, false); } 2.使用window.onload = function(){FuncName1(); FuncName();},直接onload两个函数.可以加一个判断, 复制代码 代码如

  • window.onload的页面加载技巧

    把两段代码分别测试后发现不带括号的window.onload在页面加载后显示了正确的效果. 我想window.onload也相当于一个触发事件,如果函数加了括号那就直接先执行函数,再加载body.而不加括号,则相当于将一个函数当作变量赋值到window.onload上,并不立即加载. 代码一: window.onload = doIt(); function doIt() { var oDiv = document.getElementById("div1"); alert (oDiv

  • window.onload 加载完毕的问题及解决方案（上）

    解决方法, 一.Mozilla 提供了一个非公开的(undocumented)函数: 复制代码 代码如下: // for Mozilla browsers if (document.addEventListener) { document.addEventListener("DOMContentLoaded", init, false); } 二.对于 IE 浏览器,可以使用IE特有的 defer 属性: 复制代码 代码如下: <script defer type="t

  • JS:window.onload的使用介绍

    1.最简单的调用方式 直接写到html的body标签里面,如: 复制代码 代码如下: <html> <body onload="func()"> </body> </html> 2.在JS语句调用 复制代码 代码如下: <script type="text/javascript"> function func(){--} window.onload=func; </script> 3.同时 调用

  • 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

  • Angular.js中window.onload(),$(document).ready()的写法浅析

    一,问题发现: 最近公司有个微信公众号项目,为了方便直接使用anular.js+ionic进行开发,里面有使用到echarts图表,具体开发中发现echarts在初始化绑定图表的DOM节点时,一直提示该节点不合法;可是明明已经把代码写在了window.onload()中了,又改成$(function(){})结果还是不行. 二,解决方案 1使用angular.element <script type="text/javascript"> angular.element(wi

  • 引用其它js时如何同时处理多个window.onload事件

    有时引用其它js时,其js却使用了window.onload事件,这样的话,引入的页面的onload事件就有可能执行不了,怎样才能两个都运行呢?除了将两个写到一块儿去的方法外,还有其他的方法 if(window.onload!=null){ eval("theOldFun="+window.onload.toString()); window.onload=function(){theOldFun();addReadResource();}; } eval()函数的作用: 它的功能是把

  • window.onload和$(function(){})的区别介绍

    复制代码 代码如下: window.onload=function{} 表示页面加载完了后(包括dom和js),再执行函数里面的内容: 复制代码 代码如下: $(function(){}) 表示页面(dom)加载完了后,再执行函数里面的内容

  • jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>验证加载顺序</title> <script src=

  • JS window对象简单操作完整示例

    本文实例讲述了JS window对象简单操作.分享给大家供大家参考,具体如下: 例1: <html> <head> <title>js---window函数</title> <meta charset="UTF-8"/> <script type="text/javascript"> // 显示框:没有返回值,出现一个提示框 var sto; var stl; function testAler

  • JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法window.onload没有简化写法$(document).r

随机推荐