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

字节鎏金师
• 阅读 2652

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;
            }
    }
点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
4年前
Vue.js的图片加载性能优化你可以试试
前言图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。备注以下的优化一、优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的。资源Vue.jsElementUI优化一:图片加载动画只有当图片加载完成后才可以显示图片,加载动画结束。我们使用ElementUI
陈发良 陈发良
4年前
总结:常用js方法
javascript函数注释/获取页面缓存@methodgetSession函数名@param参数名字符串类型,需要获取的key名@return变量名对象类型/img.onload定义和用法onload事件在图片加载完成后立即执行。判断设备constuserAgentnavigator
Wesley13 Wesley13
4年前
java并发中CountDownLatch的使用
java并发中CountDownLatch的使用在java并发中,控制共享变量的访问非常重要,有时候我们也想控制并发线程的执行顺序,比如:等待所有线程都执行完毕之后再执行另外的线程,或者等所有线程都准备好了才开始所有线程的执行等。这个时候我们就可以使用到CountDownLatch。简单点讲,CountDownLatch存有一个放在QueuedS
Jacquelyn38 Jacquelyn38
4年前
手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
前言图片压缩对于我们日常生活来讲,是非常实用的一项功能。有时我们会在在线图片压缩网站上进行压缩,有时会在电脑下软件进行压缩。那么我们能不能用前端的知识来自己实现一个图片压缩工具呢?答案是有的。效果展示原图片大小:82KB压缩后的图片大小:17KB测试是不是特别good!!!看到上面的压缩后的图片,可能你还会质疑图片的清晰度,那么看下面(第一张图为压缩后的图片
浩浩 浩浩
4年前
【Flutter实战】图片和Icon
3.5图片及ICON3.5.1图片Flutter中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。ImageProviderImageProvider是一个抽象类,主要定义了图片数据获取的接口load(),从不同的数据源获取图片需要实现不同的ImageProvi
Stella981 Stella981
4年前
Gradle的构建过程都不会?带你全面了解Android如何自定义Gradle插件
目前Android工程的默认构建工具为Gradle,我们在构建APK的时候往往会执行./gradlewassembleDebug这样的命令。。那么这个命令到底代表着什么含义呢?命令的执行究竟是在做什么事情呢?我们能不能在命令执行的过程中做一些自己的操作呢?接下来我们来具体的进行分析。Gradle的构建过程G
Stella981 Stella981
4年前
Glide
1.with函数可以传入activity,fragment,context,传入的参数会决定glide加载图片的生命周期,当activity,fragment被销毁的时候,加载就会停止  with函数首先判断了是否在主线程中使用,如果不在主线程中使用,那么传入的参数就相当于applicationContext,在主线程中使用,就要判断是不是applica
Stella981 Stella981
4年前
Python3中的super()函数详解
关于Python3中的super()函数我们都知道,在Python3中子类在继承父类的时候,当子类中的方法与父类中的方法重名时,子类中的方法会覆盖父类中的方法,那么,如果我们想实现同时调用父类和子类中的同名方法,就需要使用到super()这个函数,用法为super().函数名()下面是一个例子:
Stella981 Stella981
4年前
Cocos Creator 资源加载流程剖析【三】——Load部分
Load流程是整个资源加载管线的最后一棒,由Loader这个pipe负责(loader.js)。通过Download流程拿到内容之后,需要对内容做一些“加载”处理。使得这些内容可以在游戏中使用。这里并不是所有的资源都需要进行一个加载处理,目前只有图片、Json、Plist、Uuid(Prefab、场景)等资源才会执行加载的流程,其他的资源在Downloa
Stella981 Stella981
4年前
Jmagic与 ImageMagick linux下安装与使用
  公司现在用的是java开发,后台难免会用到图片上传,自动生成缩略图,然后不可避免的要安装一些比较好的软件,我们公司使用的是ImageMagick,一个图片处理程序,就是说我们可以通过程序来进行图片的处理,格式化转换,加水印,生成缩略图等。但是!这只是一个软件,当我们安装完这个软件的时候我们只能通过命令来进行图片转换   比如convert
深入理解 Flutter 图片加载原理 | 京东云技术团队
Flutter官方为我们提供了Image控件可实现图片的加载及显示,Image控件本身是一个StatefulWidget,那么在图片显示过程中是如何加载及显示出来的呢?本篇文章将逐步分析Flutter中图片加载原理,理解了Flutter图片源码的加载原理后对我们有什么帮助?