javascript 替换 window.onload 的 document.ready
通常我们想要在页面内容加载完成后运行 JS 时,都会使用 window.onload 来处理,比如:
window.onload = function(){
alert('Hello World!');
};
这段代码将在页面载入完成后弹出一个 "Hello World!" 的警告框,但是众所周知,window.onload
的特点是页面元素全部加载完成后才执行,比如页面内有大量的图片之类,当打开网页时,其实相关的 DOM
已经全部加载完成,此时已经可以执行你想要执行的脚本了,可是图片的加载速度要很慢于页面的
HTML,这显然在大多数情况下不是我们想要的。
jQuery 提供一个 $(document).ready(); 来解决此问题,当页面 DOM 加载完成后,ready()
里的函数便会立即执行,但如果我们在不使用 jQuery 的情况下呢?
好了,废话不多说,大家都明白想要什么,以下是来自国外网站的一段代码,功能同等于 jQuery 的
$(document).ready();
页面内容加载完成后运行js
window.onload = function(){
//code
}; 当页面DOM加载完成后运行js
(function () {
var ie =!!(window.attachEvent&&!window.opera),wk=/webkit\/(\d+)/i.test(navigator.userAgent)&&(RegExp.$1<525);
var fn =[],run=function(){for(var i=0;i<fn.length;i++)fn[i]();},d=document;d.ready=function(f){
if(!ie&&!wk&&d.addEventListener){return d.addEventListener('DOMContentLoaded',f,false);}if(fn.push(f)>1)return;
if(ie)(function(){try{d.documentElement.doScroll('left');run();}catch(err){setTimeout(arguments.callee,0);}})();
else if(wk)var t=setInterval(function(){if(/^(loaded|complete)$/.test(d.readyState))clearInterval(t),run();},0);};
})();
javascript 替换 window.onload 的 document.ready的更多相关文章
- js常见执行方法window.onload = function (){},$(document).ready()
1. window.onload = function(){}; 当页面DOM对象加载完毕,web浏览器能够运行JS时,此方法即被触发. 2. $(document).ready();当web页面以及 ...
- window.onload和$(document).ready(function(){})的区别
前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...
- window.onload和$(document).ready()的区别
window.onload和$(document).ready()的区别,如下表所示 window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...
- window.onload和$(document).ready()比较
浏览器在页面加载完毕后,JS通常使用window.onload方法为DOM元素添加事件,而jQuery使用的是$(document).ready()方法.两者功能相似,但也有细微差异,下面简要对比一下 ...
- window.onload和document.ready的区别
window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不 ...
- window.onload 与 $(document).ready() 的区别
以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...
- 浏览器加载模式:window.onload和$(document).ready()的区别(详解)
jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: wind ...
- window.onload()与$(document).ready()区别
浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在javascript中,通常使用window.onload()方法. 在jquery中,则使用$(document).ready ...
- window.onload 和 $(document).ready()
一. window.onload 1. 必须等到页面上所有元素(包括图片, JS文件,CSS文件等外部资源)加载完成后才执行 2. window.onload绑定多个函数时,只会执行最后一个 < ...
随机推荐
- WIN8系统中 任务管理器 性能栏 显示CPU利用率(已暂停)怎么回事?
解决办法: 点上方的 查看--更新速度--普通
- 基于设备树的TQ2440的中断(2)
下面以按键中断为例看看基于设备数的中断的用法: 设备树: tq2440_key { compatible = "tq2440,key"; interrupt-parent = &l ...
- iOS中block简介-作用域
转:http://www.2cto.com/kf/201401/269467.html 用block可以定义任意的代码片段,将其像对象一样传入另一个方法:它是c级别的语法,和C语言中的函数指针非常相似 ...
- C++MFC编程笔记day05 文档类-单文档和多文档应用程序
文档类 1 相关类 CDocument类-父类是CCmdTarget类,所以,文档类也能够处理菜单等 命令消息. 作用保存和管理数据. 注意事项:怎样解决断言错 ...
- 1.1.6版本Druid连接MSSQLServer 2008 R2报错The query timeout value -1 is not valid. #2210
https://github.com/alibaba/druid/releases/tag/1.1.8问题已修复,请使用新版本 xhhwc commented on 21 Dec 2017 1.1.6 ...
- information_schema系列六(索引,表空间,权限,约束相关表)
information_schema系列六(索引,表空间,权限,约束相关表) 1: STATISTICS 这个表提供的是关于表的索引信息: INFORMATION_SCHEMA Name SHOW ...
- Locks Set by Different SQL Statements in InnoDB
A locking read, an UPDATE, or a DELETE generally set record locks on every index record that is scan ...
- SD内存卡禁止写入只读怎么办?另类SPI模式修复坏卡
这几天很郁闷,买的32G TF卡老出问题,三星的标,不知道是不是正品,标称C10,且不说是不是真的三星和真的C10,反正测试一下容量倒是真的,价格么也比较亲民,好像是69块? 哎,可惜呀,好景不长 ...
- 企业级搜索引擎Solr 第三章 索引数据(Indexing Data)[1] (转)
Index Data Author: David Smiley Eric Pugh 译者:Koala++ / 屈伟 在这一章中我们将了解如何将数据传入Solr.这个传入的过程称之为索引,尽管中间还包含 ...
- 硬链接(hard link)和符号连接(symbolic link)
inode ====== 在Linux系统中,内核为每一个新创建的文件分配一个inode,每个文件都有一个惟一的inode号,我们可以将inode简单理解成一个指针,它永远指向本文件的具体存储位置.文 ...