• Dom页面加载


     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Dom页面加载完成</title>
     6 </head>
     7 <body>
     8     <!-- 
     9 
    10     在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件、DOM操作某些结点等。
    11     原来比较常用的是window的onload 事件,而该事件的实际效果是:当页面解析/DOM树建立完成,并完成了诸如图片、脚本、样式表甚至是iframe中所有资源的下载后才触发的。
    12     这对于很多 实际的应用而言有点太“迟”了,比较影响用户体验。
    13     为了解决这个问题,ff中便增加了一个DOMContentLoaded方法,与onload相比,该 方法触发的时间更早,它是在页面的DOM内容加载完成后即触发,而无需等待其他资源的加载。
    14     Webkit引擎从版本525(Webkit nightly 1/2008:525+)开始也引入了该事件,Opera中也包含该方法。到目前为止主流的IE仍然没有要添加的意思。虽然IE下没有,但总是有解决办法 的,这篇文章对比了一下几大主流框架对于该事件的兼容性版本实现方案,涉及的框架包括:
    15     1. Prototype 2. jQeury 3. moontools 4. dojo 5. yui 6. ext
    16     最后总结各大框架的Polyfill方法,可以得到如下一个函数
    17 
    18      -->
    19 </body>
    20 
    21 <script>
    22     /*
    23     *注册浏览器的DOMContentLoaded事件
    24     *@param { Function } onready [必填]在DOMContentLoaded事件触发时需要执行的函数
    25     *@param { Object } config [可选]配置项
    26     */
    27 
    28     function onDOMContentLoaded(onready,config){
    29         //浏览器检测相关对象,在此为节省代码未实现,实际使用时需要实现。
    30         //var Browser = {};
    31         //设置是否在FF下使用DOMContentLoaded(在FF2下的特定场景有Bug)
    32         this.conf = {
    33             enableMozDOMReady:true
    34         };
    35         if( config )
    36             for( var p in config)
    37                 this.conf[p] = config[p];
    38         var isReady = false;
    39         function doReady(){
    40             if( isReady ) return;
    41             //确保onready只执行一次
    42             isReady = true;
    43             onready();
    44         }
    45         /*IE*/
    46         if( Browser.ie ){
    47             (function(){
    48                 if ( isReady ) return;
    49                 try {
    50                     document.documentElement.doScroll("left");
    51                 } catch( error ) {
    52                     setTimeout( arguments.callee, 0 );
    53                     return;
    54                 }
    55                 doReady();
    56             })();
    57             window.attachEvent('onload',doReady);
    58         }
    59         /*Webkit*/
    60         else if (Browser.webkit && Browser.version < 525){
    61             (function(){
    62                 if( isReady ) return;
    63                 if (/loaded|complete/.test(document.readyState))
    64                     doReady();
    65                 else
    66                     setTimeout( arguments.callee, 0 );
    67             })();
    68             window.addEventListener('load',doReady,false);
    69         }
    70         /*FF Opera 高版webkit 其他*/
    71         else{
    72             if( !Browser.ff || Browser.version != 2 || this.conf.enableMozDOMReady)
    73                 document.addEventListener( "DOMContentLoaded", function(){
    74                     document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
    75                     doReady();
    76                 }, false );
    77             window.addEventListener('load',doReady,false);
    78         }
    79     }
    80 
    81 
    82 
    83 
    84 </script>
    85 </html>
  • 相关阅读:
    Linux下如何查看版本信息
    java单利模式设计
    MIT 2012 分布式课程基础源码解析-底层通讯实现
    MIT 2012分布式课程基础源码解析-事件管理封装
    MIT 2012分布式课程基础源码解析-线程池实现
    MIT 2012分布式课程基础源码解析一-源码概述
    Leetcode按Tag刷题
    网页搜集系统
    c/c++中的各种字符串转换
    gentoo装X服务器时显卡选择
  • 原文地址:https://www.cnblogs.com/Mengchangxin/p/10641466.html
Copyright © 2020-2023  润新知