dom ready

/**
 * domReady
 * @param  {Function} fn domReady后的回调函数
 * @return {[type]}      [description]
 */

function myReady(fn){
    //对于现代浏览器,对DOMCoutentLoaded事件的处理采用标准的事件绑定方式
    if ( document.addEventListener ) {
        document.addEventListener("DOMContentLoaded", fn, false);
    } else {
        IEContentLoaded(fn);
    }

//IE模拟DOMContentloaded
    function IEContentLoaded(fn){
        var d=window.document;
        var done=false;  //done【完成了】

//只执行一次用户的回调函数init()
        var init=function(){
            if(!done){
                done=true;
                fn();
            }
        };
        (function(){
            try{
                //dom树为创建完之前调用doScrool会抛出错误
                d.documentElement.doScrool(‘left‘);
            }catch(e){
                //延迟在试一次~
                /*,在函数有名字,而且名字以后也不会变 的情况下,这样定义没有问题。但问题是这个函数的执行与函数名 factorial 紧紧耦合在了一起。为 了消除这种紧密耦合的现象,可以像下面这样使用 arguments.callee*/
                setTimeout(arguments.callee,50);
                return;
            }
            //没有错误就表示dom树构建完毕,然后立马执行用户回调.
            init();
        })();
        //监听document的加载状态
        d.onreadystatechange=function(){
            //如果用户是在domready之后绑定的函数,就立即执行 complete【完成】
            if(d.readyState==‘complete‘){
                d.onreadystatechange=null;
                init();
            }
        }
    }
}

时间: 2024-07-31 20:04:03

dom ready的相关文章

【jQuery源码】DOM Ready

一直以来,各种JS最佳实践都会告诉我们,将JS放在HTML的最后,即</body>之前,理由就是:JS会阻塞下载,而且,在JS中很有可能有对DOM的操作,放在HTML的最后,可以尽可能的保证JS的执行在DOM加载完成之后.而如果放在onload事件中执行,如果页面有很多图像,那么页面的onload事件要过很久才会触发,因此DOM Ready事件就是最好的执行JS的时间了. 所以,如果有个DOM Ready事件就好了,虽然现代浏览器已经支持DOMContentLoaded事件,但是我们还是得处理

DOM Ready 简述

当页面加载完成后去做一些事情:一般情况下一个页面的响应加载顺序是:域名解析-加载html-加载js和css-加载图片等其他信息. 1.window.onload事件   效果:在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发 原理:一是ready,表示文档结构已经加载完成(不包含图片非文字媒体文件). 二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 代码: 1 window.onload = funct

DOM Ready 详解

DOM Ready 概述 熟悉jQuery的人, 都知道DomReady事件. window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发. 另外我们需要在DOM准备完毕后, 再修改DOM结构, 比如添加DOM元素等. 否则有可能出现“Internet Explorer无法打开站点”的问题. 要模拟此错误,

window.onload及dom ready测试

测试代码段一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="http://www.twitter.com/test.css"> <script>

dom ready method

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><script src="scripts/domReady.js"></script>    <script>    /* 1.计时器,不推荐,如果domRead

[转]jQuery DOM Ready

一直以来,各种JS最佳实践都会告诉我们,将JS放在HTML的最后,即</body>之前,理由就是:JS会阻塞下载,而且,在JS中很有可能有对DOM的操作,放在HTML的最后,可以尽可能的保证JS的执行在DOM加载完成之后.而如果放在onload事件中执行,如果页面有很多图像,那么页面的onload事件要过很久才会触发,因此DOM Ready事件就是最好的执行JS的时间了. 所以,如果有个DOM Ready事件就好了,虽然现代浏览器已经支持DOMContentLoaded事件,但是我们还是得处理

jquery dom ready, jqery2.1.1实现-源码分析

本文链接http://www.cnblogs.com/Bond/p/4178311.html jquery document  ready的实现其很很简,虽说简单,其很很多人还是没去关注过它的实现.我现在闲来无事就闲扯一下jquery document  ready的实现.在低版本1.XX的实现和2.XX的略有不同,这里以2.1.1为准 平时一般都会这样写,一般就这两种方式 $(document).ready(function(){ //do something }) $(function(){

Web UI - Javascript之DOM Ready

最近终于稍微适应了工作环境,终于可以让自己缓口气.于是决定要写点东西,算是督促.记录和提升自己的学习.代码的世界,你不轮它,以后就会被它轮.这个系列尽量保持在一周或两周更一篇,目标是在创造内容的时候更深刻的理解和提升自己所学的知识, 本质上,接触Javascript编程之美,我转到前端工作,其实就是因为非常喜欢和好奇Javascript(当然,也是享受频繁的用代码和用户交互的感觉). 什么是DOM Ready 还记得刚学习Javascript的时候,老师就一直各种强调教导告诉你说js的代码一定要

原生JS 实现 dom ready

记录一下项目技术问题: 记得:放在head标签内的脚本,第一时间执行 var baseTools = { // dom ready ready: function( f ){ var ie = !!(window.attachEvent && !window.opera); var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525); var fn = []; var run = f

jQuery源码dom ready分析

一.前言 在平时开发web项目时,我们使用jquery框架时,可能经常这样来使用$(document).ready(fn),$(function(){}),这样使用的原因是在浏览器把DOM树渲染好之前,javascript是无法操作没渲染好的DOM节点. 其实除了$(document).ready(fn),$(function(){})写法外,还有两种让dom渲染完之后执行js的写法: $(document).on('ready', fn2) //通过on事件绑定函数,通过trigger触发也可