页面加载完毕执行多个JS函数

通常我们需要在打开页面时加载脚本,这些脚本必须在页面加载完毕后才可以执行,因为这时候DOM才完整,可以利用window.onload确保这一点,如:
window.onload=firstFunction;
这脚本的意思是在页面完毕后执行firstFunction函数,但当有很多个函数需要在页面加载时执行呢?可能有人说可以这样:
window.onload=firstFunction;
window.onload=secondFunction;

但这样的话只会执行secondFunction函数。

Simon Willison Blog  上提供了完美的解决方案:

[javascript] view plain copy

  1. function addLoadEvent(func) {
  2. var oldonload = window.onload;
  3. if (typeof window.onload != ‘function‘) {
  4. window.onload = func;
  5. } else {
  6. window.onload = function() {
  7. if (oldonload) {
  8. oldonload();
  9. }
  10. func();
  11. }
  12. }
  13. }

func参数就是要加载的函数名(记得只是函数名,不需要括号),有多少个函数需要在页面Load后执行的话,就调用多少次上面那个经典函数,例如:
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);
......

时间: 2024-10-10 17:35:41

页面加载完毕执行多个JS函数的相关文章

addLoadEvent.js 不管在页面加载完毕执行多少个函数,都应付自如

function addLoadEvent(func){    //不管在页面加载完毕执行多少个函数,都应付自如 var oldonload = window.onload; if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } }

两种方法实现在HTML页面加载完毕后运行某个js

两种方法实现在HTML页面加载完毕后运行某个js 这篇文章主要介绍了通过两种方法实现在HTML页面加载完毕后运行某个js,需要的朋友可以参考下 js方法: 复制代码 代码如下: <script type="text/javascript"> window.onload=function(){ var userName="xiaoming"; alert(userName); } </script> 以下为jQuery方法,需要引用jQuery

addLoadEvent 页面加载完毕执行函数

1 function addLoadEvent(func){ 2 var oldonload = window.onload; 3 if(typeof window.onload != "function"){ 4 window.onload = func; 5 } 6 else{ 7 window.onload = function(){ 8 oldonload(); 9 func(); 10 } 11 } 12 } 此函数由Simon Willison (详见http://simo

在HTML页面加载完毕后运行某个js

js <script type="text/javascript"> window.onload=function(){ //执行} </script> jQ <script type="text/javascript"> $(document).ready(function(){ //执行}); $(function(){ //执行}); </script> 原文地址:https://www.cnblogs.com/

JS判断页面加载完毕

//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readyState == "complete") { var page = DF.URLHash.get("page"); if (typeof (page) != "undefined" && page != "page1.html&q

jQuery框架使用,jq选择器,jq操作页面内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息,js/jq页面加载完毕事件,jq事件

jq选择器 // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取的是jq对象数组 // 拿到指定的页面元素jq对象 $('css3选择器语法').eq(index); var $box = $(".box").eq(1); 获取的是jq对象数组 // jq 转 js ( jq对像就是由数组包裹的js对象 ) box1 = $box[0] 从数组里取出来 box1 = $box.g

JavaScript之jQuery-4 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)

一.jQuery 页面加载后执行 代码执行的时机选择 - $(document).ready()方法和 window.onload事件具有相似的功能,但是在执行时机方面是有区别的 - window.onload 事件是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行 - $(document).ready()方法注册的事件处理程序,在DOM完全加载后就可以调用 - 一般来讲, $(document).ready()的执行要优于window.onload事件 - 需要注意的是,

页面加载完毕相关信息淡入效果

前言: 年关将至,公司一部分同事已经回老家了,虽然过年不回去,但想到明天上完班就放假了内心多少有点激动.工作上的事情不要紧的已经没心情再看了,加之今天领导不在 哈哈哈... 搞点自己的爱好! 看bootstrap的优站精选时看到了一个页面加载完毕时的一个淡入效果(http://www.mikeinghamdesign.com/),于是... 效果图: 实现思路: 此处实现主要用外边距margin-top属性和透明度opacity属性: 1.淡入区块初始设置一定上外边距,透明度完全透明: 2.页面

大坑啊!!!关于页面加载完毕事件!!!

这个坑导致我页面加载完毕后获取元素高度有问题,获取不正确或者是很小才20px,元素本身高度几百,困扰了我这个新手几天.原因就是js原生的onload事件和jq的ready事件的区别. 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个