精华内容
下载资源
问答
  • 那么问题来了,如果只是感知静态的dom用ready,onload都可以,但项目用的angular,ng-repeat什么时候循环完,或者说angular自身的生命周期中dom渲染完成怎么知道,这里做个解决问题的记录。 二、网上流传的解决方案...

    一、前言

    最近做了一个图片懒加载的小插件,功能需要dom渲染完成后,好获取那些需要懒加载的dom元素。那么问题来了,如果只是感知静态的dom用ready,onload都可以,但项目用的angular,ng-repeat什么时候循环完,或者说angular自身的生命周期中dom渲染完成怎么知道,这里做个解决问题的记录。

    二、网上流传的解决方案

    1.data-ng-init---无效

    大概意思是,给你需要监听的dom,比如body添加一个data-ng-init属性,绑定你需要在body加载完成后执行的方法。

    <div data-ng-init = "load()"></div>
    
    $scope.load = function () {
        //dosomething
    };

    我查了下资料,在stackoverflow中找到了相关介绍,data-ng-init本质是ng-init,只是在对于H5之前,ng写法会报错,为了解决这个错误而添加data前缀达到兼容的写法,所以本质还是ng-init。

    在HTML5开始之后,像Visual Studio这样的代码编辑器突出显示'ng-',这是无效的。但实际上它是有效的,所以有一种方法可以让代码编辑器通过在前面加上'data-ng- *'来理解AngularJS的属性是有效的。

    因此,当在任何HTML5代码编辑器中使用前缀时,它不会强调属性并将它们视为有效。

    这是'data- *'前缀的最初目的。-----点我跳转原回答

    那我们就改为ng-init测试下,当我执行ng-init中的代码时,是不是连angular自身的动态dom都加载完成了。

    我将ng-init直接绑在了一个需要ng-repeat的ul上,当断点已经执行了我load方法

    我去看了此时的dom渲染情况

    ul里面一个li都没有,空的,说明根本没解析完成啊,这个方法也就能感知下静态dom渲染,angular的无效,所以不符合我的要求,排除。

     2.$viewContentLoaded事件---无效

    大量博客都说了这个方法,那看来是非常的有效啊,去官网查了下api,介绍少之又少

     

    英文不好,大概意思是,需要结合ng-view指令使用,只要ng-view指令范围的视图需要重新渲染,通过监听$viewContentLoaded,就能针对改变做你想做的操作了。

    <div ng-view></div>

    $scope.$on('$viewContentLoaded', function () { //dosomething });

    测试了下,代码没执行,又去翻了下资料,怀疑是不是自己用错了,找到了一个关于使用的的特殊说明

    当ngView内容被重新加载时,从ngView作用域上发布, 通过$emit将事件沿着作用域向上传播(子作用域到父作用域),也就是说你监听这个事件必须得在那个View的上层作用域。----点我查看原文

    也没错啊,将$on换成$watch还是没效,先不说有没有效,这东西只是说感知ng-view变化时执行,没说dom加载完成后执行,不是我要找的东西。排除在外。

    3.自定义指令,$last === true---有bug

    因为我做图片懒加载的要求是,在执行懒加载方法前这些img元素都已经渲染好了,我能抓到它们。而这些图片说到底就是通过ng-repeat渲染出来的,既然感知angular dom渲染完成无效,换种思路,能不能得知ng-repeat什么时候渲染完成呢?

    通过自定义指令repeatFinish,监听ng-repeat状态。

    <ul>
        <li ng-repeat="item in data track by $index" repeat-finish></li>
    </ul>
    
    angular
    .module("mainApp")
    .directive('repeatFinish', [function () {
        //判断ng-repeat是否渲染完成的自定义指令,暂时没用到,以后可能会用
        return {
            restrict: 'EA',
            link: function (scope, element, attr) {
                if(scope.$last === true) {
                    //dosomething
                };
            },
    
        };
    }]);

    在ng-repeat过程中,scope作用域中有一个$last的状态变量,当循环到最后一个元素时,它就会变成true,而这个方法是写在link中的,link是为dom绑定相关指令事件的,赶紧去测试下,打个断点

    出问题了,我需要循环的数组其实有10条数据,理论上来说,一开始索引$index应该从0开始,但是这里却直接从1开始了,也就是第二条数据,假设我需要循环的数据一共就1条,link里面的函数直接就不触发了。

    其次,因为我实际使用是在产品分类页中,点击不同产品分类,被循环的数据data其实是在改变的,有趣的是,假设A类产品有4条,B类产品有3条,由4条切换到3条的过程中,也不会触发link中的函数。

    对于这种做法的问题,大概归纳为两点:

    一是数据只有1条时监听不到,方法是通用的,谁知道你要遍历的数据有几条。

    当需要repeat的数据是可变的,由多变少的过程不会触发,少变多的过程会触发,说到底还是有问题,用不了,有兴趣的同学可以写demo测试下,我暂时也解释不了为什么会这样。

    三、靠谱的解决方案

    功夫不负有心人,在简书的一篇文章中,找到了可行靠谱的方法,使用$timeout。

    <ul>
        <li ng-repeat="item in data track by $index"></li>
    </ul>
    
    $timeout(function () {
        //处理dom加载完成,或者repeat循环完成要做的事情
    },0);

    原理是什么呢,大家都知道,js的定时器其实也是异步的,$timeout其实只是angular为了能自动触发脏检测而封装的方法,同样也是异步。将你需要执行的方法放在$timeout中,它就会等到所有的dom渲染完成以及同步逻辑跑完最后执行,真的是让人眼前一亮!

    方案出处  实现AngularJS渲染完毕后执行脚本

    四、关于写博客的自我反应

    在我查解决方案的过程中,我确实是被一些博客弄的特别烦躁和恼火,文章内容全靠复制,代码自己不试验,比如谈到$viewContentLoaded几乎没有人提都没提这个东西是结合ng-view使用的,内容全是大同小异,怎么用也不说清楚,复制粘贴来的东西终究是别人的,那这篇博客的产出说到底浪费自己和读者的时间。这也提醒了我自己,对于以后的博客编写,涉及到代码相关的,一定亲自试验,保证可用。

    学习不是一天两天,没有捷径,唯有积累。

    转载于:https://www.cnblogs.com/echolun/p/10162133.html

    展开全文
  • vue监听dom渲染结束再触发方法

    千次阅读 2020-06-06 15:19:54
    watch:{ materielId:function(){//materielId为需要监听的data this.$nextTick(function(){ //这里写方法 }); }, }
    watch:{
    	materielId:function(){//materielId为需要监听的data
            this.$nextTick(function(){
                //这里写方法
            });
        },
    }
    
    展开全文
  • js监听某个DOM是否渲染完成

    千次阅读 2020-05-25 14:18:17
    // 检查dom是否执行完成 function checkDom() { let dom = document.getElementById('abc') if(dom) { // 执行dom加载完成后的操作 doSomething(); // 清除定时器 if(!timer) { clearTimeout(timer) } .
    //  声明定时器
    var timer = null
    //  检查dom是否执行完成
    function checkDom() {
        let dom = document.getElementById('abc')
        if(dom) {
             //  执行dom加载完成后的操作
            doSomething();
            //  清除定时器
            if(!timer) {
                clearTimeout(timer)
            }
        } else {
            //  自我调用
            timer = setTimeout(checkDom, 0)
        }
    }
    //  首次执行
    checkDom()

    上面是原生的一种写法,还有一种更好的方案:MutationObserver,翻译过来就是变动观察器,传送门:https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

     

    展开全文
  • // 文件预览 handleview(index, row) { ...加载的组件中的dom获取不到: 打印相关信息,发现: this.refs成功打印,且包含了a的信息,但是this.refs成功打印,且包含了a的信息,但是this.refs成功打印,且包含了a的
    // 文件预览
        handleview(index, row) {
          console.log(index, row);
          console.log(row.zbwjurl)
          this.viewFileDialogVisible = true
    //组件加载,组件可见
          
    

    加载的组件中的dom获取不到:
    打印相关信息,发现:
    this. r e f s 成 功 打 印 , 且 包 含 了 a 的 信 息 , 但 是 t h i s . refs成功打印,且包含了a的信息,但是this. refsathis.refs.a打印为undifined。
    我想知道,什么情况下会出现可以获取this. r e f s , 但 是 t h i s . refs, 但是this. refsthis.refs.attribute = undifined的情况:

          console.log(this.$refs)
    console.log(this.$refs.fileViewIframe)  //不可以打印获取
          this.$nextTick(function() {
            console.log(this.$refs.fileViewIframe) //可以打印获取
    
          })
          // this.$refs.fileViewIframe.src = this.GLOBAL.host+ 'imgio/img?url='+ row.zbwjurl
        },
    

    vue监听dom渲染结束再触发方法
    watch:{
    materielId:function(){//materielId为需要监听的data
    this.$nextTick(function(){
    //这里写方法
    });
    },
    }

    展开全文
  • MutationObserver -- 判断vue Dom渲染完成

    千次阅读 2020-01-16 15:42:11
    MutationObserverMutationObserver -- 判断vue Dom渲染完成MutationObserver 作用方法应用实例 MutationObserver – 判断vue Dom渲染完成 获取想要获取dom元素的宽高,打印出来的结果值一直小于DOM元素本身高度。查阅...
  • 什么是MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的MutationEvents功能的替代品,该功能是DOM3 Events规范的...
  • 今天小编就为大家分享一篇Vue监听数据渲染DOM完以后执行某个函数详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • angular监听dom加载完毕

    2017-01-09 16:57:24
    angular监听dom加载完毕
  • 另一个是`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。 栗子: ... <li v-for=item>{{item}} ... new Vue({ el:'#demo', data:{ list=[0,1,2,3,4,5,6,7,8,9,10] }, methods:{ push:...
  • vue2.0$nextTick监听数据渲染完成之后的回调函数 vue里面本身带有两个回调函数: 一个是Vue.nextTick(callback),当数据发生变化,更新后执行回调。 另一个是Vue.$nextTick(callback),当dom发生变化,更新后执行的...
  • AngularJs是Google开源的前端JS框架。使用AngularJs, 我们能够容易地、健壮的开发出类似于Gmail一样的单页Web应用。这篇文章主要介绍了详解angular中如何监控dom渲染完毕,有兴趣的可以了解一下。
  • vue里面本身带有两个回调函数: ...另一个是`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。 栗子: ... <ul id="demo"> <li v-for="item in list">{{item}}</div> &l...
  • vm.$watch('某data数据',function(val){   vm.$nextTick(function() {   某事件();   });   })
  • 如何知道ng-repeat循环的dom已经渲染完成@[ 梁冬 liangdong ]{jenis_9f24jvnh_iihbclab}@angular拥有自动化渲染DOM的特性,它能帮助我们专注于操作数据,而页面的渲染则由angular自身来完成。但是。。。 这就造成了...
  • 监听DOM元素宽高变化

    2021-04-10 18:27:49
    产生原因:红框时间线定位使用fixed导致,所属DOM宽度动态设置宽度(和父元素相等),而后溢出隐藏,但父元素宽度变化后,页面渲染已经完成会导致时间线覆盖滚动条乃至溢出 所属需求:全屏和退出全屏,放大缩小页面...
  • 主要介绍了AngularJS监听ng-repeat渲染完成的两种方法,结合实例形式分析了AngularJS基于自定义指令及广播事件实现监听功能的相关操作技巧,需要的朋友可以参考下
  • DOM渲染的详细过程

    2019-01-15 16:33:04
    DOM的渲染指的是对于浏览器中展现给用户的DOM...DOM渲染的演化过程,大致可以分为可以分为三个阶段: 纯后端渲染 纯前端渲染 服务端的js渲染结合前端渲染 下面我们分阶段来做一下说明。 第一个阶段是纯后端渲染...
  • vue数据页面渲染完成以后操作DOM

    千次阅读 2020-10-30 13:56:29
    在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度。 nextTick:在下次 DOM 更新循环结束...
  • 从网上查询资料发现是vue对象在更改完值之后然后去渲染dom元素,我执行的代码发生在了vue还没渲染完成的时候,因此会拿不到更新后的dom,解决办法为使用 $nextTick()方法,这是vue在值改变时进行dom渲染完成之后的回...
  • 在最近的项目当中有一个业务是前端监听一个数值的变化 从而给用户进行页面上的提醒(在浏览器的标签处动态跳动当前的信息提醒),在老版本的html可能感觉这个是一个无从下手的需求,需要监听页面的一个节点属性的...
  • 刚刚看到群上一个人说,他们公司凡是用angular和jquery插件一起用的人,都被解雇了,没看到这句话之前我很惭愧的说我有这样用过,其实angular的生态系统那么完善,完全可以不用去操作任何的dom元素都可以满足你的...
  • 业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写。有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些...
  • angular 9获取渲染异步数据完成后的dom节点 在学习angular的过程中,遇到过要根据情况操作dom节点。通常在初始化的时候会遇到一种情况,就是dom还没有将异步获取的数据渲染的时候。即使是ngAfterViewInit() 也同样...
  • 监听vue.js中v-for全部渲染完成

    千次阅读 2017-11-09 17:09:45
    监听vue.js中v-for全部渲染完成vue里面本身带有两个回调函数: 一个是Vue.nextTick(callback),当数据发生变化,更新后执行回调。 另一个是Vue.$nextTick(callback),当dom发生变化,更新后执行的回调。例子:... ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,833
精华内容 11,533
关键字:

如何监听dom渲染完成