通常我们想要在页面内容加载完成后运行 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的更多相关文章

  1. js常见执行方法window.onload = function (){},$(document).ready()

    1. window.onload = function(){}; 当页面DOM对象加载完毕,web浏览器能够运行JS时,此方法即被触发. 2. $(document).ready();当web页面以及 ...

  2. window.onload和$(document).ready(function(){})的区别

    前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...

  3. window.onload和$(document).ready()的区别

    window.onload和$(document).ready()的区别,如下表所示   window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...

  4. window.onload和$(document).ready()比较

    浏览器在页面加载完毕后,JS通常使用window.onload方法为DOM元素添加事件,而jQuery使用的是$(document).ready()方法.两者功能相似,但也有细微差异,下面简要对比一下 ...

  5. window.onload和document.ready的区别

    window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不 ...

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

    以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...

  7. 浏览器加载模式:window.onload和$(document).ready()的区别(详解)

    jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: wind ...

  8. window.onload()与$(document).ready()区别

    浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在javascript中,通常使用window.onload()方法. 在jquery中,则使用$(document).ready ...

  9. window.onload 和 $(document).ready()

    一. window.onload 1. 必须等到页面上所有元素(包括图片, JS文件,CSS文件等外部资源)加载完成后才执行 2. window.onload绑定多个函数时,只会执行最后一个 < ...

随机推荐

  1. mysql slave 主从 指定表 通配符

    slave配置 slave端有可能,只复制部分表,有一些表不需要备份配置如下: 有一些表你可能做水平或则垂直的处理.如果表的前几位一样,就可以用通配符%匹配 replicate-wild-ignore ...

  2. Windows Phone本地数据库(SQLCE):14、删除数据(翻译)

    这是“windows phone mango本地数据库(sqlce)”系列短片文章的最后一篇第十四篇. 为了让你开始在Windows Phone Mango中使用数据库,这一系列短片文章将覆盖所有你需 ...

  3. ArcEngine设置有牵引线的标注

    来自:https://blog.csdn.net/u011609113/article/details/51372827/ 在ArcGIs中很容易就能设置带有牵引线的标注.   在ArcEngine中 ...

  4. arcgis10.1安装出现1606错误怎么办?找不到盘符

    HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\ESRIHKEY_LOCAL_MACHINE\SOFTWARE\ESRIHKEY_CURRENT_USER\Softwa ...

  5. WordPress主题开发实例:产品展示

    产品展示用到文章和缩略图功能 实现步骤: 一.创建分类 后台创建文章分类:产品中心 二.开启缩略图功能 在主题的functions.php中,添加一段代码,代码如下: add_theme_suppor ...

  6. CentOS 7 Tomcat服务的安装与配置

    3422人阅读  http://blog.51cto.com/13525470/2073657 一.Linux下的Java运行环境 Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由S ...

  7. spring boot1.5以上版本@ConfigurationProperties取消location注解后的替代方案 cannot resolve method location

    问题 在spring boot(版本1.5.1.RELEASE)项目中,当准备映射自定义的配置文件属性到类中的时候,发现原本的@ConfigurationProperties注解已将location属 ...

  8. JAVA NIO non-blocking模式实现高并发服务器(转)

    原文链接:JAVA NIO non-blocking模式实现高并发服务器 Java自1.4以后,加入了新IO特性,NIO. 号称new IO. NIO带来了non-blocking特性. 这篇文章主要 ...

  9. 7.7 服务远程暴露 - 订阅与通知(TODO)

    为了安全:服务启动的ip全部使用10.10.10.10 远程服务的暴露总体步骤: 将ref封装为invoker 将invoker转换为exporter 启动netty 注册服务到zookeeper 订 ...

  10. ENC28J60学习笔记——第1部分

    1前言 嵌入式以太网开发,可以分为两个部分,一个是以太网收发芯片的使用,一个是嵌入式以太网协议栈的实现.以太网收发芯片的使用要比串口收发芯片的使用复杂的多,市面上流通比较广泛的以太网收发芯片种类还不少 ...