dom树，加载执行多函数之domReady

xfee 发布于2019-08-21 10:23 / 1784人阅读

摘要：在日常的开发中，我们常常用来触发执行函数，但是这往往不能满足我们的要求，比如，的时候，我们要取得大量的加载到图片的父级上，这个时候如果要是等到图片都加载完毕后再赋值，那么有的用户没等看到图片就点击了，这样就会出问题，所以，我们要在整个加载完

onload

在日常的开发中，我们常常用window.onload来触发执行函数，但是这往往不能满足我们的要求，比如，ajax的时候，我们要取得大量的url加载到图片的父级上，这个时候如果要是等到图片都加载完毕后再赋值，那么有的用户没等看到图片就点击了，这样就会出问题，所以，我们要在整个dom加载完毕后，就立即执行一些函数，所以就有了domReady。

domReady

domReady这种叫法，好像是在jq中才这么叫的，真正的内容就是在火狐中有一个‘DOMContentLoaded’，而最近的也有很多现代浏览器接受了这种做法，但是在ie中就没有办法，但是在ie中，每个dom元素都有一个滚动条属性，所以，这样可以用做判断，下面就是一个例子

例子

/**
 * [domReady 监听Dom树创建完毕执行参数]
 * @param  {[List]} fnList [dom执行完毕所执行的函数数组]
 * @return {[void]}        []
 */
    function domReady(fnList){
        if(!fnList)return undefined;
        if(document.addEventListener){
            document.addEventListener("DOMContentLoaded",function(){
                doFnList(fnList);//先进的浏览器
            },false)
          }else{
                try{
                    document.documentElement.doScroll("left");//在ie中每个元素都有一个doSroll属性，看documentElement的滚动条属性是否完毕，如果完毕就证明整个dom树创建完毕，如果没有创建完毕就访问这个属性会报错，所以try catch了
                }catch(e){
                    setTimeout(arguments.callee,50)
                }
                doFnList(fnList);
           }
            var b = false; //只执行一次 
            /**
             * [doFnList 执行函数列表的方法]
             * @param  {[type]} fnList [dom执行完毕所执行的函数数组]
             * @return {[void]}        []
             */
            function doFnList(fnList){
              if(b)return;
              b = true;
              for(var i=0,fn;fn = fnList[i++];){
               //console.log(i)
                fn();
              }
                fnList = null;
                doFnList = null;
            }
    }

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85432.html

JavaScript常用脚本集锦1

摘要：初始化参数可选参数，必填参数可选，只有在请求时需要参数可选回调函数可选参数可选，默认为参数可选，默认为创建引擎对象打开发送普通文本接收文档将字符串转换为对象最后，说明一下此函数的用法。即等待与成功回调，后标志位置为。 jquery限制文本框只能输入数字 jquery限制文本框只能输入数字,兼容IE、chrome、FF（表现效果不一样）,示例代码如下： $(input).keyup(...

ygyooo 2019-08-21 10:22 评论0 收藏0
使用性能API快速分析web前端性能

摘要：性能时间线以一个统一的接口获取由和所收集的性能数据。浏览器支持下表列举了当前主流浏览器对性能的支持，其中标注星号的内容并非来自于性能工作小组。页面的性能问题一直是产品开发过程中的重要一环，很多公司也一直在使用各种方式监控产品的页面性能。从控制台工具、Fiddler抓包工具，到使用DOMContentLoaded和document.onreadystatechange这种侵入式java...

mj 2019-08-21 10:48 评论0 收藏0
页面加载事件--DOMContentLoaded

摘要：这个时候就出场了，它定义为当页面文档加载并解析完毕之后会马上出发事件，而不会等待样式文件图片文件和子框架页面的加载。 DOMContentLoaded 和 window.onload 的区别当页面完全加载完毕后会触发 window.onload 事件，我们知道可以利用 window.onload 事件来触发并执行需要页面完全加载完毕后才能执行的 javascript 脚本，但是假如页...

Tikitoo 2019-08-20 14:48 评论0 收藏0
页面加载事件--DOMContentLoaded

摘要：这个时候就出场了，它定义为当页面文档加载并解析完毕之后会马上出发事件，而不会等待样式文件图片文件和子框架页面的加载。 DOMContentLoaded 和 window.onload 的区别当页面完全加载完毕后会触发 window.onload 事件，我们知道可以利用 window.onload 事件来触发并执行需要页面完全加载完毕后才能执行的 javascript 脚本，但是假如页...

jkyin 2019-08-01 16:26 评论0 收藏0
Require.js实现js模块化管理教程

摘要：再者，引入一大堆的文件也不美观，而使用即可实现的模块化异步加载。通过定义模块的方式可分为以下两类。当和这两个模块加载完成之后将会执行回调函数。插件可以使回调函数在结构加载完成之后再执行。最好的方式是使用字符串但这很难管理尤其实在多行的时候。什么是Require.js Require.js是一个AMD规范的轻量级js模块化管理框架，最新版本require.js 2.1.11压缩后只有1...

fox_soyoung 2019-08-20 12:21 评论0 收藏0