Angular 4 - Check If All Page Resources Are Fully Loaded (Make Loader Spins Until All Resources Are Fully Loaded)

Angular 4 - check if all page resources are fully loaded (make loader spins until all resources are fully loaded)

Just make your component implement AfterViewInit and set isLoading to false in ngAfterViewInit().

class YourComponent implements AfterViewInit {
    // ...
    ngAfterViewInit() {
        this.isLoading = false;
    }
}

There's no need to attach an additional event handler, angular covers that completely with its lifecycle callbacks.

Detect if page has finished loading

jQuery(window).load(function () {
    alert('page is loaded');

    setTimeout(function () {
        alert('page is loaded and 1 minute has passed');   
    }, 60000);

});

Or http://jsfiddle.net/tangibleJ/fLLrs/1/

See also http://api.jquery.com/load-event/ for an explanation on the jQuery(window).load.

Update

A detailed explanation on how javascript loading works and the two events DOMContentLoaded and OnLoad can be found on this page.

DOMContentLoaded: When the DOM is ready to be manipulated. jQuery's way of capturing this event is with jQuery(document).ready(function () {});.

OnLoad: When the DOM is ready and all assets - this includes images, iframe, fonts, etc - have been loaded and the spinning wheel / hour class disappear. jQuery's way of capturing this event is the above mentioned jQuery(window).load.

How to block resources based on their content before they are loaded in Webextensions?

It looks like requestBody will land in an upcoming version of Firefox (currently appears to be 50): bugzilla.mozilla.org/show_bug.cgi?id=1201979. Which is to say, you can probably test in Beta now, since 49 was released this week.

Show ajax spinner, hide page render until ALL ajax calls complete?

Just wanted to point out a simpler solution but yet effective.
You will need to append this loading div to your page.

<div id="loading"></div>

After that with the following we make sure that this div is going to be shown or hidden whenever an ajax call starts and stops respectively.

    $(document).ajaxStop(function () {
        $('#loading').hide();
    });

    $(document).ajaxStart(function () {
        $('#loading').show();
    });

Lastly, add the following CSS to ensure that the the div will display full screen like a blocked UI element (which suggests that the page is loading something/ instead of the spinner).

#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    -webkit-transition: all .5s ease;
    z-index: 1000;
    display:none;
}

Demo JSFIDDLE here

AngularJS: show loading HTML until data is loaded

I would create a custom directive as per the other answer, but here is how you could do it without the directive which might be a good idea to learn before getting into more complex functionality.. A couple things to note:

1. Using a setTimeout to simulate an ajax call
2. The loading icon is preloaded and is being hidden when the data loads. Just a simple ng-hide directive.
3. There is no loading image in my example just some text that gets hidden (obviously your html will have the correct css references).

Demo: http://plnkr.co/edit/4XZJqnIpie0ucMNN6egy?p=preview

View:

<ul >
  <li ng-repeat="item in items">
    <p>Always present: {{item.name}}</p>
    <p>Loads later: {{item.lateLoader}} <i ng-hide="item.lateLoader"  class="icon icon-refresh icon-spin">loading image i don't have</i></p>
  </li>
</ul>

Controller:

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.items = [{name: "One"}];
  setTimeout(function() {
    $scope.$apply(function() {
     $scope.items[0].lateLoader = 'i just loaded';  
    });
  }, 1000);
});

Display a loading bar before the entire page is loaded

Use a div #overlay with your loading info / .gif that will cover all your page:

<div id="overlay">
     <img src="loading.gif" alt="Loading" />
     Loading...
</div>

jQuery:

$(window).load(function(){
   // PAGE IS FULLY LOADED  
   // FADE OUT YOUR OVERLAYING DIV
   $('#overlay').fadeOut();
});

Here's an example with a Loading bar:

jsBin demo

;(function(){
  function id(v){ return document.getElementById(v); }
  function loadbar() {
    var ovrl = id("overlay"),
        prog = id("progress"),
        stat = id("progstat"),
        img = document.images,
        c = 0,
        tot = img.length;
    if(tot == 0) return doneLoading();

    function imgLoaded(){
      c += 1;
      var perc = ((100/tot*c) << 0) +"%";
      prog.style.width = perc;
      stat.innerHTML = "Loading "+ perc;
      if(c===tot) return doneLoading();
    }
    function doneLoading(){
      ovrl.style.opacity = 0;
      setTimeout(function(){ 
        ovrl.style.display = "none";
      }, 1200);
    }
    for(var i=0; i<tot; i++) {
      var tImg     = new Image();
      tImg.onload  = imgLoaded;
      tImg.onerror = imgLoaded;
      tImg.src     = img[i].src;
    }    
  }
  document.addEventListener('DOMContentLoaded', loadbar, false);
}());

*{margin:0;}
body{ font: 200 16px/1 sans-serif; }
img{ width:32.2%; }

#overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.9);
  transition: 1s 0.4s;
}
#progress{
  height:1px;
  background:#fff;
  position:absolute;
  width:0;                /* will be increased by JS */
  top:50%;
}
#progstat{
  font-size:0.7em;
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}

<div id="overlay">
  <div id="progstat"></div>
  <div id="progress"></div>
</div>

<div id="container">
  <img src="http://placehold.it/3000x3000/cf5">
</div>