Checking all elements are finished loading

Question

We have a website built using AngularJS and some components take awhile to load. What I would to do is create an event that would be triggered when all components are loaded. I could use tag selector with load event. However, the custom tag for for the components may change down the road and I prefer not to rely on that. So the question is...is there a way to create an event handler that doesn't rely on tag name but will be triggered when all loadings on the page is done.

Answer 1

I think this might useful to you if you use angular UI route.

$viewContentLoading - fired once the view begins loading, before the DOM is rendered. The '$rootScope' broadcasts the event.

$rootScope.$on('$viewContentLoading', 
function(event, viewConfig){ 
   //Do something
});

$viewContentLoaded - fired once the view is loaded, after the DOM is rendered. The '$scope' of the view emits the event.

$scope.$on('$viewContentLoaded', 
function(event){ 

//Do something
});

OR you can try angular $window object.

$window.onload = function(e) {
  //do something
}