原生js--文档加载时间
onload触发时机:文档和所有的图片都加载完毕
DOMContentLoaded触发时机:文档加载并解析完毕,所有deferred脚本执行完毕。但此时图片和async脚本可能依旧在加载。
readystatechange触发时机:
document.readyState属性包含多个状态,当值为“complete”时表明文档加载并执行完毕。
将事件绑定到DOMReady上的方法封装:
var whenReady = ( function(){
var funcs = [];
var ready = false;
function handler( e ){
if( ready ) return;
if( e.type === "readystatechange" && document.readyState !== "complete" ) return;
for( var i=0; i < funcs.length; i++ ){
funcs[i].call( document );
}
ready = true;
funcs = null;
}
if( document.addEventListener ){
document.addEventListener( "DOMContentLoaded", handler, false );
document.addEventListener( "readystatechange", handler, false );
window.addEventListener( "load", handler, false );
}else if( document.attachEvent ){
document.attachEvent( "onreadystatechange", handler );
window.attachEvent( "load", handler );
}
return function whenReady( f ){
if( ready ) f.call( document );
else funcs.push( f );
}
}() );
原生js--文档加载时间的更多相关文章
- js 文档加载完成之后执行 备用
//文档加载完成之后执行 (function(){ var _globeCallback; window.$$ = function(callback){ _globeCallback = callb ...
- 原生JS与jQuery文档加载完毕的写法
HTML是有执行顺序的,默认是自上而下执行.所以当我们的js代码在html代码下边的时候,可以正常执行,而当我们的js代码在html代码上边的时候,可以就无法正常执行了,这时,我们需要在文档加载完毕的 ...
- 使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
- js坚持不懈之14:不要在文档加载之后使用 document.write()示例
在看w3school的JavaScript教程时,关于文档输出流中有这么一句话:绝不要在文档加载之后使用 document.write().这会覆盖该文档. 不太明白什么意思,找了一个例子: < ...
- JQuery文档加载完成执行js的几种方法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
- 基于DOMContentLoaded实现文档加载完成后执行的方法
我们有时可能需要一些在页面加载完成之后执行的方法,其实js原生就提供了onload方法,所以我们最简单的办法就是直接给onload赋值一个函数,在页面加载完成之后就会自动执行 widnow.onloa ...
- jQuery文档加载完毕的几种写法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
- jquery文档加载几种写法,图片加载写法
jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
随机推荐
- LeetCode224——Basic Calculator
Implement a basic calculator to evaluate a simple expression string. The expression string may conta ...
- 仿网易nec首页动画效果
仿网页nec首页动画效果nec链接:http://nec.netease.com/ 首先,介绍animationanimation检索或设置对象所应用的动画特效.animation由“keyframe ...
- 50.EasyGank妹纸App
50.EasyGank妹纸App 前言 基于MVP模式下 , RxJava+RxAndroid+Retrofit的组合 . RxJava RxAndroid Retrofit Okhttp Gson ...
- 小程序笔记四:表单提交form
index.wxml代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view ...
- thinkphp并发 阻塞模式与非阻塞模式
结构代码 public function index(){ $fp = fopen("lock.txt", "w+"); if(flock($fp,LOCK_E ...
- 【数据分析知识点】detailed table of contents
Exploratory Data Analysis - Detailed Table of Contents http://www.itl.nist.gov/div898/handbook/eda/e ...
- 移动端网页使用flexible.js加入百度联盟广告样式不一致问题解决
flexible.js是淘宝推出的一款移动端手机自适应的库,源码内容很简洁,当网页使用了该库之后,页面会在head中加入对应的页面响应式的meta标签. 当使用flexible.js的时候,引入百度联 ...
- Centos7系统配置上的变化
https://www.cnblogs.com/panblack/p/Centos7-WhatsNew-01.html https://www.cnblogs.com/panblack/p/Cento ...
- 几个实用的sublime text 2的快捷键
Sublime text快捷键 Sublime text 2是一款轻量.简洁.高效.跨平台的编辑器,他适合编写javascript,html,css,php,paython等等, 作为程序员,编码效率 ...
- linux alias使用
安装一些软件 python redis mysql jdk,都需要添加环境变量,一个路径添加到了环境变量,就可以直接在linux控制台输入 xx命令. 否则不添加环境变量,使用xx就会提示找不到命令 ...