`

javascript的domReady

阅读更多
    http://www.cnblogs.com/rubylouvre/archive/2009/12/30/1635645.html
基本上每个库都有这东西,因为如果要对页面上的元素进行操作,我们必须等到页面加载了这个元素才行,否则会报错,但是我们很能判定某个元素是否已加载,但我们可以判定页面是否加载,这就是我们经常把代码放到window.onload = function(){}之中的缘由。但window.onload事件是待到页面上的所有资源被加载才激活,如果页面上有许多图片,音乐或falsh,而我们要操作的元素在的它们的下方呢?因此,W3C做了少有几桩好事,搞了DOMContentLoaded与addEventListener,可能也不是他们搞的,把某浏览器的私有实现盖上个大印,标明它是标准罢了,如safari的canvas,IE的getBoundingClientRect……DOMContentLoaded是DOM树完成时激活的事件,addEventListener支持多重加载与冒泡捕获。IE没有这东西,我在《javascript的事件加载》基本给出它的雏形了(注:昨天重写了该文),本文将在它的基础上进行进一步的封装与改进,如setTimeout改为零秒延迟,清除setTimeout,执行完加载后把加载函数清除掉,对IE框架结构的页面进行更安全的设置……最重要的是修正下面网友 wbkt2t 提到的在IE中的失误!。晚上再次更新,发现doScroll并没有想象中的快,比不上script defer……

IE6的数据:

IE8的数据:

综合执行顺序为:
    oncontentready,这时DOM树完成
    script defer,这时开始执行设定了defer属性的script
    ondocumentready complete,这时可以使用HTC组件与XHR
    html.doScroll 这时可以让HTML元素使用doScroll方法
    window.onload 这时图片flash等资源都加载完毕

new function(){
  dom = [];
  dom.isReady = false;
  dom.isFunction = function(obj){
    return Object.prototype.toString.call(obj) === "[object Function]";
  }
  dom.Ready = function(fn){
    dom.initReady();//如果没有建成DOM树,则走第二步,存储起来一起杀
    if(dom.isFunction(fn)){
      if(dom.isReady){
        fn();//如果已经建成DOM,则来一个杀一个
      }else{
        dom.push(fn);//存储加载事件
      }
    }
  }
  dom.fireReady =function(){
    if (dom.isReady)  return;
    dom.isReady = true;
    for(var i=0,n=dom.length;i<n;i++){
      var fn = dom[i];
      fn();
    }
    dom.length = 0;//清空事件
  }
  dom.initReady = function(){
    if (document.addEventListener) {
      document.addEventListener( "DOMContentLoaded", function(){
        document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除加载函数
        dom.fireReady();
      }, false );
    }else{
      if (document.getElementById) {
        document.write("<script id=\"ie-domReady\" defer='defer'src=\"//:\"><\/script>");
        document.getElementById("ie-domReady").onreadystatechange = function() {
          if (this.readyState === "complete") {
            dom.fireReady();
            this.onreadystatechange = null;
            this.parentNode.removeChild(this)
          }
        };
      }
    }
  }
}

使用方法:
dom.Ready(function(){
  alert("我的domReady!")
});
dom.Ready(function(){
  alert("我的domReady测试多重加载1!")
});
dom.Ready(function(){
  alert("我的domReady测试多重加载2!")
});
dom.Ready(function(){
  alert(document.getElementById("test").innerHTML)
});

具体完整的代码:
<!doctype html> <html dir="ltr" lang="zh-CN"> <head id="head"> <meta charset="utf-8"/> <title>jQuery的domReady </title> <script type="text/javascript"> new function(){ dom = []; dom.isReady = false; dom.isFunction = function(obj){ return Object.prototype.toString.call(obj) === "[object Function]"; } dom.Ready = function(fn){ dom.initReady();//如果没有建成DOM树,则走第二步,存储起来一起杀 if(dom.isFunction(fn)){ if(dom.isReady){ fn();//如果已经建成DOM,则来一个杀一个 }else{ dom.push(fn);//存储加载事件 } } } dom.fireReady =function(){ if (dom.isReady) return; dom.isReady = true; for(var i=0,n=dom.length;i<n;i++){ var fn = dom[i]; fn(); } dom.length = 0;//清空事件 } dom.initReady = function(){ if (document.addEventListener) { document.addEventListener( "DOMContentLoaded", function(){ document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除加载函数 dom.fireReady(); }, false ); }else{ if (document.getElementById) { document.write("<script id=\"ie-domReady\" defer='defer'src=\"//:\"><\/script>"); document.getElementById("ie-domReady").onreadystatechange = function() { if (this.readyState === "complete") { dom.fireReady(); this.onreadystatechange = null; this.parentNode.removeChild(this) } }; } } } } dom.Ready(function(){ alert("我的domReady!") }); dom.Ready(function(){ alert("我的domReady测试多重加载1!") }); dom.Ready(function(){ alert("我的domReady测试多重加载2!") }); dom.Ready(function(){ alert(document.getElementById("test").innerHTML) }); window.onload = function(){ alert("这是onload事件!") }; </script> </head> <body> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="图片1" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" alt="图片2" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg" alt="图片3" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="图片4" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="图片5" /> <table class="filament_table" cellspacing="0" width="700" rules="cols" > <col class="grey" width="25%"></col> <col class="yellow"></col> <thead> <tr> <th> 参数 </th> <th> 描述 </th> </tr> </thead> <tbody> <tr> <td> scrollbarDown </td> <td> Default. Down scroll arrow is at the specified location </td> </tr> <tr> <td> scrollbarHThumb </td> <td> Horizontal scroll thumb or box is at the specified location </td> </tr> <tr> <td> scrollbarLeft </td> <td> Left scroll arrow is at the specified location </td> </tr> <tr> <td> scrollbarPageDown </td> <td> Page-down scroll bar shaft is at the specified location </td> </tr> <tr> <td> scrollbarPageLeft </td> <td> Page-left scroll bar shaft is at the specified location </td> </tr> <tr> <td> scrollbarPageRight </td> <td> Page-right scroll bar shaft is at the specified location </td> </tr> <tr> <td> scrollbarPageUp </td> <td> Page-up scroll bar shaft is at the specified location </td> </tr> <tr> <td> scrollbarRight </td> <td> Right scroll arrow is at the specified location </td> </tr> <tr> <td> scrollbarUp </td> <td> Up scroll arrow is at the specified location </td> </tr> <tr> <td> scrollbarVThumb </td> <td> Vertical scroll thumb or box is at the specified location </td> </tr> <tr> <td> down </td> <td> Composite reference to scrollbarDown </td> </tr> <tr> <td> left </td> <td> Composite reference to scrollbarLeft </td> </tr> <tr> <td> pageDown </td> <td> Composite reference to scrollbarPageDown. </td> </tr> <tr> <td> pageLeft </td> <td> Composite reference to scrollbarPageLeft. </td> </tr> <tr> <td> pageRight </td> <td> Composite reference to scrollbarPageRight. </td> </tr> <tr> <td> pageUp </td> <td> Composite reference to scrollbarPageUp. </td> </tr> <tr> <td> right </td> <td> Composite reference to scrollbarRight. </td> </tr> <tr> <td> up </td> <td> Composite reference to scrollbarUp. </td> </tr> </tbody> </table> <p id="test">我们添加了些图片与表格延缓页面的加载速度</p> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg" alt="图片1" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="图片2" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="图片3" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="图片4" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="图片5" /> </body> </html>

以下,更新前一些有用的东西,舍不得丢弃,暂时还留着。

用于判定是否为顶层window:
//方法一
var topwindow = self === self.top
//方法二
var topwindow = false;
try {
  topwindow = window.frameElement == null;
} catch(e){}

推荐第一种,第二种必须要待到document.body形成之时才能用,有关frameElement 的资料详见这里与这里。 frameElement要求当前window是一个 frame 或 iframe才存在,否则返回null。不过第一种要注意一下,在IE 下,top, self, parent 和对应的 window 并不全等。见下面测试:
alert(window === window.top); // 应该为true alert(self === self.top); // 应该为true alert(self === window.top); // 应该为true alert(self === window); // 应该为true alert(window == window.top); // 应该为true alert(typeof self === typeof window); // 应该为true alert(self == window); // 应该为true

一些有用的链接:

http://tanny.ica.com/ICA/TKO/test.nsf/DOMContentLoaded.htm
分享到:
评论

相关推荐

    requirejs-domready-2.0.1-1.zip

    【标题】"requirejs-domready-2.0.1-1.zip" 提供的是 RequireJS DOMReady 模块的一个版本,这是一个JavaScript库,用于在DOM加载完成后再执行特定的脚本或函数。RequireJS 是一个著名的JavaScript模块化加载器,它...

    JS DOMReady事件的六种实现方法总结

    JavaScript DOMReady事件是网页开发中一个非常重要的概念,它的主要作用是在HTML文档的DOM结构完全加载完毕后,但在所有外部资源如图片、脚本、样式表等加载之前执行指定的函数。这样可以确保开发者能够在不等待全部...

    前端项目-domready.zip

    首先,DOMReady的核心在于监听DOM树构建完成的事件,以便在页面元素完全可操作时执行JavaScript代码。传统的DOMReady处理方式是使用window.onload事件或者jQuery库中的$(document).ready()方法。然而,随着前端技术...

    一些主流JS框架中DOMReady事件的实现小结

    标题所指的知识点是主流JavaScript框架对DOMReady事件的处理方式。DOMReady事件指的是在DOM树构建完成之后立即触发,而不需要等待图片、脚本、样式表等其他资源加载完毕。这一点对于提高用户体验尤为重要,因为在...

    前端项目-require-domReady.zip

    总结来说,"前端项目-require-domReady.zip" 是一个针对AMD加载器的插件,它的主要任务是检测DOM是否已准备好,允许开发者在DOM完全加载后才执行相关的JavaScript代码,提高用户体验和代码质量。开发者可以通过研究...

    domReady的实现案例

    `domReady`是一个JavaScript编程中的常见概念,它指的是在网页的文档对象模型(Document Object Model,简称DOM)加载完成但不等待所有外部资源(如图片、脚本等)加载完毕时执行一段代码的机制。在jQuery中,通常...

    ArcGIS API for Javascript3加载天地图

    require(["esri/map", "esri/layers/FeatureLayer", "dojo/_base/array", "dojo/domReady!"], function(Map, FeatureLayer, array) { var map = new Map("mapDiv", { basemap: "tianmap-vector", center: [116.4...

    ArcGIS API for Javascript 开发教程

    "dojo/domReady!" ], function(Map, ArcGISTiledMapServiceLayer) { var map = new Map("mapDiv", { basemap: "streets", center: [-118.2437, 34.0522], // long, lat zoom: 10 }); }); ``` **四、...

    domready:domReady 的 Shim 存储库

    **标题解析:** "domready" 是一个 JavaScript 库,专注于处理 DOM(文档对象模型)加载就绪事件。"domReady" 函数通常用于在页面的 DOM 完全加载后执行脚本,确保所有 HTML 元素都已解析并可供 JavaScript 访问,而...

    JavaScript dom编程艺术:个人笔记.pdf

    8. 脚本和文档加载时机:掌握正确使用JavaScript脚本的最佳实践,包括将脚本放在页面的头部、底部或使用DOMReady事件确保文档完全加载后再运行脚本。 9. 跨浏览器兼容性问题处理:了解不同浏览器对DOM API的支持...

    arcgis javascript自定义infowindow

    在ArcGIS JavaScript API中,Infowindow(信息窗体)是一种用于展示地图上图层中图斑信息的组件。Infowindow通常会在用户点击或选择地图上的特定特征时出现,显示与该特征相关的详细信息。在自定义Infowindow的过程...

    mootools入门教程1

    domready 事件可以保证 JavaScript 代码尽可能少地出错,并且可以在页面完全下载完成之前执行脚本,从而避免因为一张大图要下很长时间而导致脚本不能执行,从而出现异常。 MooTools 1.2 是一个非常强大和轻量级的 ...

    javascript优先加载笔记代码

    - 优先加载方式:将JavaScript代码放在文档的底部,并采用DOMReady事件来触发,即当DOM完全加载并且解析完成后就执行代码,这可以避免阻塞页面的渲染。 2. DOMReady事件: - 与window.onload的区别:window....

    domReady:Bower-domReady

    domReady 一个用于检测DOM就绪的AMD加载程序插件。 已知可在RequireJS中使用,但应在支持相同加载器插件API的其他AMD加载器中运行。 文件 请参阅。 最新发布 最新版本可从“最新”标签获得。 执照 麻省理工学院 ...

    使用fValidator库进行Javascript表单验证

    window.addEvent('domready', function() { var form = $('myForm').validate({ rules: { field1: 'required', field2: 'email' }, messages: { field1: '字段1是必填的', field2: '请输入有效的电子邮件...

    dooomrdy:同构 DOMReady - 只是节点中的 nextTicks

    DOMReady事件是JavaScript中一个重要的概念,它表示DOM(Document Object Model)已经加载完成,可以安全地对DOM进行操作。而“nextTick”则是Node.js中的一个概念,用于处理异步操作。 标题“dooomrdy:同构 ...

    domReady:跨浏览器 DOM 就绪事件检测

    准备好 跨浏览器 DOM 就绪事件检测功能,能够在 DOM 加载和交互后对任意数量的回调进行排队。 用法 domReady ( function ( ) { // dom is loaded! } ) ;

    elo:低保真 JavaScript 事件模块

    elo是一个低保真跨浏览器 JavaScript 事件 API,gzips &lt;3k。 这是一个极简主义者的事件库。 它可以作为一个独立的库工作,也可以集成到一个主机中,比如 。API ( ) elo没有声明$命名空间,但是它可以在闭包中使用...

    JavaScript判断DOM何时加载完毕的技巧

    然而,一个常见的问题是JavaScript代码可能会在DOM完全加载完成之前就执行,这会导致无法访问DOM元素,进而引发错误。为了确保JavaScript正确地与DOM交互,开发者必须等待DOM完全加载完毕后才执行相关的操作。本文将...

Global site tag (gtag.js) - Google Analytics