• 阿迪王   2014/10/21 12:45:00
  • JavaScript如何判断页面是否加载完成?
  • 关键字: js 页面加载 加载函数
  •  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>判断Dom加载完毕</title>
        <mce:script type="text/javascript" language="javascript"><!--
            function domReady(f) {
                //如果Dom已经加载,立即执行函数
                if (domReady.done) { return f(); }
                //增加一个函数判断Dom是否加载完毕
                if (domReady.timer) {
                    domReady.ready.push(f); //把它加入待执行函数清单中
                } else {
                    //为页面加载完毕绑定一个事件
                    addEvent(window, "load", isDOMReady);
                    //初始化执行函数的数组
                    domReady.ready = [f];
                    //尽可能的检查Dom是否可用
                    domReady.timer = setInterval(isDOMReady, 13);
                }
            }
            //检查Dom是否可用
            function isDOMReady() {
                //如果我们能判断出Dom是否可用,忽略
                if (domReady.done) {
                    return false;
                }
                //检查若干元素是否可用
                if (document && document.getElementsByTagName && document.getElementById && document.body) {
                    //如果可用,停止检查
                    clearInterval(domReady.timer);
                    domReady.timer = null;
                    //执行所有等待的函数
                    for (var i = 0; i < domReady.ready.length; i++)
                    { domReady.ready[i](); }
                    //记录Dom加载完成的标识
                    domReady.ready = null;
                    domReady.done = true;
                }
            }
            //添加事件函数
            function addEvent(element, type, handler) {
                if (!handler.$$guid) {
                    handler.$$guid = addEvent.guid++; //为每一个事件处理函数赋予一个独立的ID
                }
                //为元素建立一个事件类型的散列表
                if (!element.events) {
                    element.events = {};
                }
                //为没对元素/事件建立一个事件处理函数的散列表
                var handlers = element.events[type];
                if (!handlers) {
                    handlers = element.events[type] = {};
                    //存储已有的事件处理函数(如果已存在一个)
                    if (element["on" + type]) {
                        handelers[0] = element["on" + type];
                        //在散列表中存储该事件的处理函数
                        handelers[handler.$$guid] = handler;
                        //赋予一个全局事件处理函数来处理所有工作
                        element["on" + type] = handleEvent;
                    };
                    //创建独立ID的计数器
                    addEvent.guid = 1;
                    function removeEvent(element, type, handler) {
                        //从散列表中删除事件处理函数
                        if (element.events && element.events[type]) {
                            delete element.events[type][handler.$$guid];
                        }
                        function handleEvent(event) {
                            var returnValue = true;
                            //获取事件对象(IE使用全局的事件对象)
                            event = event || fixEvent(window.event);
                            //获取事件处理函数散列表的引用
                            var handlers = this.events[event.type];
                            //依次执行每个处理函数
                            for (var i in handlers) {
                                this.$$handleEvent = handlers[i];
                                if (this.$$handleEvent(event) === false) {
                                    returnValue = false;
                                }
                            }
                            return returnValue;
                        };
                        //增加一些IE事件对象缺乏的方法
                        function fixEvent(event) {
                            event.preventDefault = fixEvent.preventDefault;
                            event.stopPropagation = fixEvent.stopPropagation;
                            return event;
                        }
                        fixEvent.preventDefault = function () {
                            this.returnValue = false;
                        }
                        fixEvent.stopPropagation = function () {
                            this.cancelBubble = true;
                        }
                    }
                }
            }
        
    // --></mce:script>
        <mce:script type="text/javascript" language="javascript"><!--
            //测试使用
            domReady(function () {
                alert("判断Dom是否可用:Dom可用!")
            });
        
    // --></mce:script>
    </head>
    <body>
    </body>
    </html>


大家的回答
  • 还没有人回答这个问题哦,亲,快来帮帮TA吧
  •   我来回答
  • 注册用户登录后才能发表评论,请 登录注册
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款