原生javascript、angularjs、angular2分别是如何监控DOM加载完成

1、问题：原生javascript、angularjs、angular2分别是如何监控页面加载
在上一节中介绍了原生的angularjs实现拖拽布局，但在实际的开发中需要适配自己项目中的页面，
对页面中的每个模块需要在初始化的时候取得相应的元素，此时遇到的问题就是页面DOM未渲染完成，
getElementsByClassName得到的都是空值，由此引出angularJs中如何监控页面加载完成。
本文根据实际开发中总结出，原生js、angularjs、angular2分别是如何监控页面加载完成的。
2、 解决方法
2.1 原生js监控页面加载完成----DOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件才被触发，而无需等待样式表、图像和子框架的完成加载。
另一个不同的事件 load 应该仅用于检测一个完全加载的页面。
在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个令人难以置信的流行的错误，所以要谨慎。
注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。
示例：

<link rel="stylesheet" href="css.php">
<script>
document.addEventListener('DOMContentLoaded',function(){
    console.log('3 seconds passed');
});
</script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
      console.log("DOM fully loaded and parsed");
  });

  for(var i=0; i<1000000000; i++){
      // 这个同步脚本将延迟DOM的解析。
      // 所以DOMContentLoaded事件稍后将启动。
  }
</script>

2、2 angularJs框架监控页面加载完成----$viewContentLoad
这个涉及到angular $digest的生命周期，包括angularJs在引擎下如何工作的、如何双向绑定等等，具体原因这里不详述。
介绍几种解决方法：
(1) 在controller里面利用$on或者$watch

$scope.$on('$viewContentLoaded', function() {  
    alert('1');  
});  

$scope.$watch('$viewContentLoaded', function() {  
    alert('1');  
});

   (2)$timeout的方法（不建议使用）
   在方法中$timeout中内容会最后执行，相当于dom加载完再执行.
   $timeout(function () {
       var tabContent = document.getElementsByClassName("tab-content");
       tabContent[0].style.height = 520+ 'px';
   })
   2、3 angular2框架监控页面加载完成----组件的生命周期钩子ngAfterContentInit
   组件的生命周期是由angular2内部管理，从组件的创建、渲染，到数据变动事件的触发，再到组件从DOM中移除，angular2都提供了一系列的钩子，这些钩子包括
   ngOnChanges
    ngOnInit
    ngDoCheck
    ngOnDestroy
   ngAfterContentInit
    ngAfterContentChecked
    ngAfterViewInit
    ngAfterViewChecked
   通过这些钩子可以让开发者非常方便的在这些事件触发时，执行相应的回调函数。
   其中ngAfterViewInit - 组件相应的视图初始化之后调用。
   在组件相应的视图初始化之后调用，它主要用于获取通过 @ViewChild 或 @ViewChildren 属性装饰器查询的视图元素。
初始化完组件视图及其子视图之后调用。第一次ngAfterContentChecked()之后调用，只调用一次。
通过在该钩子下去执行可取得需要的元素，轻松解决问题解决问题。

原生javascript、angularjs、angular2分别是如何监控DOM加载完成

猜你喜欢