: How can I trigger a simple preloader animation right after the content above the threshold loads? I want to achieve the following pageloading effect: A full-screen white overlay fades out when

@Cugini213

With Angular.js

Add markup in your html body and use angular.js, i wont length my answer for no reason.

Vote Up Vote Down

@Deb1703797

This may not be feasible.

In-page static content can be considered loaded as soon as the page url is retrieved. Separate assets such as CSS, JS, images, dynamic content, etc. are loaded individually. For CSS, JS, and dynamic content, it's not possible to automatically tell if they affect things above the fold or not until they're loaded. Never mind the whole issue of the fold being different for each user.

But let's say you have a fixed line on the page you want to call "the fold". Split your pages into two types on assets: stuff that effects the page above the fold, and stuff that effects the page below the fold. Arrange for some initial JS to dynamically load all those assets. Once it knows it has loaded all the above the fold stuff, it can trigger the "please wait" indicator removal and continue loading the remaining stuff.

Even this isn't going to be a simple task. There are a lot of edge cases to think about and deal with like image load errors, needing to arrange for placeholders if necessary, the page is still loading and users are going to scroll, etc.

Vote Up Vote Down