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

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;
            }
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值