原生javascript如何实现共享onload事件

在工作时，我们给一个元素绑定了事件，如果dom还没加载完成，就执行了js代码，就不会绑定成功。常规解决方案就是用：

window.onload = EventFunction;

可是如果有两个 事件，

  • window.onload = EventFunction1;
  • window.onload = EventFunction2;

那2就会将1取代，这时你可能会想：每个事件处理板书只能绑定一条指令。有一种办法可以让我们避开这一难题：可以先创建一个匿名函数来容纳这两个函数，然后把那个匿名函数绑定到onload事件上，如下所示：

window.onload = function(){
 firstFunction();
 secondFunction();
}

它确实能很好地工作————在需要绑定的函数不是很多的场合，这应该是最简单的解决方案了。

这里还有一个弹性最佳的解决方案——不管你打算页面加载完毕时执行多少个函数，它都可以应付自如。这个方案需要额外编写一些代码，把函数绑定到window.onload事件就非常易行了。

这个函数的名字是addLoadEvent，它是由Simon Willison写的。它只有一个参数：打算在页面加载完毕时执行的函数的名字。

下面是此函数要完成的操作：

1.把现有的 window.onload 事件处理函数的值存入变量 oldonload;

2.如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它；

3.如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾。

function addLoadEvent(func) {
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
      window.onload = func;
    }else{
      window.onload = function(){
        oldonload();
        func();
      }
    }
  }

这将把那些在页面加载完毕时执行的函数创建为一个队列。如果想把刚才那两个函数添加到队列里去，只需要写出以下代码就行了：

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

我发现这个函数非常实用，尤其是在代码变得越来越复杂的时候。无论打算在页面加载完毕时执行多少个函数，只要定一条语句就可以安排好一切。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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 onload处理html页面加载之后的事件

    复制代码 代码如下: <script type="text/javascript"> window.onload=function(){ alert("加载完毕") } </script>

  • js之onload事件的一点使用心得

    如果我问你window.load和window.onload分别是什么意思,恐怕你会回答我:"这不是页面加载完就执行吗". 但是答案是不一定,得看你怎么用.看一下例子吧 例1: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <

  • 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.同时 调用

  • 全面解析jQuery $(document).ready()和JavaScript onload事件

    对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>1-1</title> <script type="text/javascript"> document.getElementById("panel").onclick = fu

  • js 一个关于图片onload加载的事

    首先先明确一下我要的目的: 当用户进入页面的时候,显示loading 加载图标,等最大的图片加载之后再opacity 图片; 功能很简单,但是很蛋疼的是,我没完全做出来: 在做的时候,第一时间我自然想到了如下的方法: 复制代码 代码如下: $(function(){    $('.banner img').load(function(){        console.log('已经加载')        });}); 熟话说的好呀,自信心太膨胀,到头来打击很大了:我以为这样就可以了,然后看了一

  • js中onload与onunload的使用示例

    引言: 今天周末没事,就想起前面自己做的一个B2C的电子商务平台,还有些一些地方没有完善,就想着完善,嗯,问题是这样的,在电子商务平台中有这样一个场景,我将购物车放置在Session中,使其在整个购物的过程中都能从Session中得到购物车模型,我在购物车某型中有的商品都会在数据库中减少其购物车中购买的数量,但是如果我关闭窗口,怎样让Session中的购物车模型中的商品数量添加到数据库中,于是我查找了GOOGLE.百度,得到的第一个提示,就是:关闭窗口自动清除Session,于是找到的第一个方法

  • 解析页面加载与js函数的执行 onload or ready

    首先,页面加载顺序:解析HTML结构.加载外部脚本和样式表文件.解析并执行脚本代码.构造HTML DOM模型.加载图片等外部文件.页面加载完毕. 也就是:html → head → title → #text(网页标题) → style → 加载样式 → 解析样式 → link → 加载外部样式表文件 → 解析外部样式表 → script → 加载外部脚本文件 → 解析外部脚本文件 → 执行外部脚本 → body → div → script → 加载脚本 → 解析脚本 → 执行脚本 → img

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

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

  • 原生javascript如何实现共享onload事件

    在工作时,我们给一个元素绑定了事件,如果dom还没加载完成,就执行了js代码,就不会绑定成功.常规解决方案就是用: window.onload = EventFunction; 可是如果有两个 事件, window.onload = EventFunction1; window.onload = EventFunction2; 那2就会将1取代,这时你可能会想:每个事件处理板书只能绑定一条指令.有一种办法可以让我们避开这一难题:可以先创建一个匿名函数来容纳这两个函数,然后把那个匿名函数绑定到on

  • JavaScript与Image加载事件(onload)、加载状态(complete)

    昨天用jQuery插件aeImageResize,发现它更有优势:每张图片加载完后,会马上进行等比缩放. 这归于图片对象Image的加载事件onload的功劳. 查看插件的源码,发现它也依赖图片对象的complete属性和onload事件,并且特别把IE6区分对待,到底IE6在图片加载对象上,与其它浏览器有什么不同呢? 看下文: 通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识. 看个例子: 复制代码 代码如下: <input type=&qu

  • 原生Javascript和jQuery做轮播图简单例子

    原生Javascript和jQuery做轮播图简单例子

    接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮

  • 原生JavaScript制作计算器

    原生JavaScript制作计算器

    原生JavaScript制作计算器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--第一个数X--> X:<input type="text" id="inp1" value="" /&g

  • 详解原生JavaScript实现jQuery中AJAX处理的方法

    详解原生JavaScript实现jQuery中AJAX处理的方法

    在这篇文章,我使用 Node.js作为后端.没错,这就可以全栈(浏览器和服务器)JS了.Node.js 是很简洁的,我鼓励你能在 Github下载demo,并关注该项目.下面是服务器端的代码: // app.js var app = http.createServer(function(req, res){ if(req.url.indexOf("/scripts/") >= 0){ render(req.url.slice(1), "application/javas

  • 原生javascript实现的ajax异步封装功能示例

    本文实例讲述了原生javascript实现的ajax异步封装功能.分享给大家供大家参考,具体如下: <!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"&g

  • 原生javaScript实现图片延时加载的方法

    本文实例讲述了原生javaScript实现图片延时加载的方法.图片延时加载其实是有jquery插件了并且加载方法非常的简单并且合理了,但有朋友觉得加载jquery插件包太大了,于时自己写了一个,给各位分享一下. 首先,图片延时加载可以节省我们带宽,获取到更好的用户体验,尤其对于图片多的站点,这一点显得至关重要,下面就跟大家探讨一下图片延时加载原理和实现代码. 图片延时加载原理 图片延时加载原理是在html里面的图片src填的并不是真正的图片地址,而是以一种自定义属性把图片地址赋给img标签,如:

  • 原生javascript实现拖动元素示例代码

    本文介绍原生javascript实现元素拖动. 思路: 1.首先改变被拖动元素的布局属性,关键是"position:absolue": 2.捕捉鼠标事件"mousedown","mousemove","mouseup": 3.当触发"mousedown"时,记录下当前鼠标在元素中的相对位置,_x,_y: 4.紧接着处理"mousemove"事件,通过改变元素的top和left属性来移动元

  • 原生JavaScript实现Tooltip浮动提示框特效

    原生JavaScript实现Tooltip浮动提示框特效

    使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化.事件绑定.事件冒泡等技巧和知识. 特效四个关键点: 显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示出来 隐藏:鼠标移开时,ToolTip提示框自动隐藏 定位:ToolTip提示框的位置需要根据ToolTip超链接的位置来设置 可配置:ToolTip提示框可以根据参数不同,改变尺寸和显示内容 注意点: 1)border-radius和 box-shadow兼容写法 2)不论鼠标指针穿过被选元素或

随机推荐