js共享onload事件
问题:通过js进行事件绑定,必须在HTML文档加载完成后再执行js脚本,否则可能因DOM不完整导致无法完成预计的效果,但对于不同的需求如何选用最佳的实现方式呢,这里做了整理,可以做参考。
一、对于小型的网页,可以直接用下面的代码绑定即可:
window.onload = func;
二、在复杂的一些可以用:
window.onload = function(){
func1();
func2();
func3();
}
在需要绑定的函数不太多的场合,这是最简单的解决方案。
三、对于复杂场合,则需要用到addLoadEvent函数来完成该任务了。不多说,先上代码:
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
通过阅读代码,可以得出该函数完成的操作有:
1、把现有的window.onload事件处理函数的值存入oldonload;
2、如果这个函数还未绑定任何函数,就像“一”那样添加;
2、如果这个函数上已经绑定了一些函数,则把新函数追加到现有指令的末尾。
可以看出,它把在网页加载完成时需要执行的函数创建成了一个队列,需要的时候直接加入队列即可。至于如何调用该函数进行绑定,在可以在你实现完新函数后,在后面跟着调用一下就ok,如:
addLoadEvent(新函数名);
最后,addLoadEvent函数有Simon Willison编写,详见http://simon.incutio.com
js共享onload事件的更多相关文章
- JS之ONLoad事件
如果我问你window.load和window.onload分别是什么意思,恐怕你会回答我:“这不是页面加载完就执行吗”. 但是答案是不一定,得看你怎么用.看一下例子吧 例1: <!DOCTYP ...
- 原生javascript 共享onload事件
在工作时,我们给一个元素绑定了事件,如果dom还没加载完成,就执行了js代码,就不会绑定成功.常规解决方案就是用: window.onload = EventFunction; 可是如果有两个 事件, ...
- 共享onload事件
在做前端工作中,我们想要设置某个函数prepare,让它在网页加载完毕后执行,会触发一个onload事件,这个事件与windows对象相关联,必须把prepare函数绑定到这个时间上,语法如下:win ...
- 关于js中onload事件的部分报错。
当使用onload获取元素时,建议在onload事件之前定义需要获取的元素名称,在onload里面只执行获取操作,这样获取到的元素在后面才能顺利使用. <!DOCTYPE html> &l ...
- js window.onload事件
1.最简单的调用方式 直接写到html的body标签里面,如: ? 1 2 3 4 <html> <body onload="func()"& ...
- onload事件与ready事件的区别,原生js与jquery的区别
onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...
- 【JS】怎样同一时候处理多个window.onload事件
有时引用其他js时,其js却使用了window.onload事件,这种话,引入的页面的onload事件就有可能执行不了.如何才干两个都执行呢?除了将两个写到一块儿去的方法外,还有其他的方法 if(wi ...
- JS ready和onload事件 比较分析
页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件); 二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onlo ...
- (js有关图片加载问题)dom加载完和onload事件
引用旺旺的话...哈哈哈DOMContentLoaded事件表示页面的DOM结构绘制完成了,这时候外部资源(带src属性的)还没有加载完.而onload事件是等外部资源都加载完了就触发的.$.read ...
随机推荐
- SDK更新太慢
同时,更新ADT和SDK Manager 在SDK Manager下Tools->Options打开了SDK Manager的Settings,选中“Force https://… source ...
- NSURLSessionDownloadTask 断点下载
#import "ViewController.h" #import "ASIHTTPRequest.h" #import <AFNetworking/A ...
- 使用java进行文件编码转换
在开发过程中,可能会遇到文件编码的转换,尽管说开发工具eclipse能够转换编码,可是有的情况却非常不方便.比方,原来文件本身的编码是GBK,如今要转换成UTF-8,假设直接在eclipse中把文件编 ...
- 用java读取properties文件--转
今天为了通过java读取properties文件,google了很长时间,终于找到了.现在特记录之和大家一起分享. 下面直接贴出代码:java类 public class Mytest pub ...
- C#泛型的性能优势
我写东西一向追求短小精悍,就不放代码去验证的,只说结论,并会与Java泛型做对比.有不对之处还望指出. 泛型作为一个在C#2.0中就引入的特性,也是C#的重要特性之一,我经常看到有人讨论泛型带来的便捷 ...
- java输入输出流小细节
package System; public class Systemdemo { public static void main(String args[]){ demo1(); demo2(); ...
- 基于Lucene的文件检索Demo
通过Lucene实现了简单的文件检索功能的Demo.这个Demo支持基于文件内容的检索,支持中文分词和高亮显示. 下面简单的介绍下核心的类 1)索引相关的类 1.FileIndexBuilder -- ...
- Android(java)学习笔记169:Activity中的onCreate()方法分析
1.onCreate( )方法是android应用程序中最常见的方法之一: 翻译过来就是说,onCreate()函数是在activity初始化的时候调用的,通常情况下,我们需要在onCreate()中 ...
- Mybatis高级应用
Mybatis是一个半自动的框架.相对于hibernate全自动模式,mybatis为开发人员提供了更加灵活的对sql语句操作的控制能力,有利于dba对相关的sql操作进行优化,同时也方便开发者构建复 ...
- HTML+CSS基础学习笔记(6)
一.元素分类 CSS中html的标签元素大体分为三种类型 1.块状元素 @特点: #每个块级元素都从新的一行开始,并且其后的元素也另起一行(一个块级元素独占一行) #元素的高度.宽度.行高以及顶和底边 ...