jquery如何实现domReady和onload判断的

function ready(fn) {
    var completed = function() {

        if ( document.addEventListener ) {
            document.removeEventListener( "DOMContentLoaded", completed, false );
            window.removeEventListener( "load", completed, false );

        } else {
            document.detachEvent( "onreadystatechange", completed );
            window.detachEvent( "onload", completed );
        }

        fn();
    }
    if (document.readyState === ‘completed‘) { // 页面本身已加载结束
        fn();
    } else if (document.addEventListener) {

        document.addEventListener("DOMContentLoaded", completed, false);
        window.addEventListener("load", completed, false);
    } else {
        document.attachEvent("onreadystatechange", completed);
        window.attachEvent("load", completed);
    }
}

ready(function() {
    console.log(1);
});

console.log(3);
window.onload = function() {
    console.log(2);
}
console.log(4);

// 3,4,1,2
时间: 2024-08-01 22:35:11

jquery如何实现domReady和onload判断的的相关文章

[Javascript]jquery $(document).ready() 与window.onload的区别

引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间         window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同      

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

jQuery $(document).ready()和window.onload 根据ready()方法的API说明http://api.jquery.com/ready/. 这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded. 即当DOM加载完毕的时候,执行这个指定的方法. 因为只有document的状态ready之后,对page的操作才是

jquery中关于对象类型的判断原理

class2type[ core_toString.call(obj) ] jquery中关于对象类型的判断原理 jquery源码中关于类型判断的工具函数为type,调用方法为$.type()或者jQuery.type(),关于type函数的实现为: 1 type: function( obj ) { 2 if ( obj == null ) { 3 return String( obj ); 4 } 5 // Support: Safari <= 5.1 (functionish RegExp

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

jquery 的ready() 与window.onload()的区别

做web开发时常用Jquery中$(document).ready()和JavaScript中的window.onload方法,两者都是要在页面加载完成以后加载的方法,但是这两者还是有很大区别的.最近遇到了这样的问题,查询了多篇文章,做一下总结. 简单来说,要以用以下张表来表示 : Jquery的ready()与Javascrpit的load()   window.onload() $(document).ready() 加载时机 必须等待网页全部加载完毕(包括图片等),然后再执行JS代码 只需

jQuery中的domReady分析

我们都知道javascript中的window.onload方法的不足:必须等到所有图片和富文本媒体加载完后才能执行,影响用户体验.更好的做法是等到dom加载完即执行相应回调.类似jQuery中domReady方法应运而生. 在jQuery中用这个方法非常简便:$(function(){}),这个其实是$(document).ready(function(){})的简便写法,见到源码: rootjQuery = jQuery(document); if ( jQuery.isFunction(

jQuery的document ready与 onload事件——你真的思考过吗?

在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是document.onload? 4. document ready到底是什么ready,DOM渲染完成? 5. jQuery怎么实现$(document).ready? 6. jQuery的ready,还能ready什么? 7. jQuery的document ready就一定比window.onlo

转载 jquery $(document).ready() 与window.onload的区别

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个          $(d

JQuery执行函数与window.onload函数

JavaScript和HTML之间的交互: 1.通过用户和浏览器操作页面时引发的事件来处理的. 2.当文档或者它的某些元素发生某些变化时,浏览器会自动生成一个事件. 例如:当浏览器装载完一个文档后,会生成事件(属于2):当用户单击某个按钮时,也会生出事件(属于1). DOM加载完成:初始化页面的前提大都是DOM文档就绪,即文档树加载完成,而非整个页面(包括页面中的所有元素)载入完成. 因为后者涉及到载入页面中包含的图像及其他二进制内容完成后才能触发页面载入事件(即onload) 以浏览器装载文档