CODEWITHSUNDEEP
javascriptcssangularjsloading
Tarun Dugar
Tarun Dugar

Reputation: 8971

hide body until external resources(loaded asynchronously) load

So, I have various external resources like google material icons and so on which are loaded using the link and script tags:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

How can I hide the body until all these resources(loaded via link and script) are loaded completely? Can I do this using custom directives? And also, I am NOT using jQuery.

EDIT:

The reason I want this is that google's material design icons are included in the following way:

<i class="material-icons">
    visibility
</i>

So, while the material icons css is still loading, I can see all these icon texts, 'visibility' in my case on the screen in their textual form. And, only when the css loads, does the text translate to icon form. I'll add a screenshot soon.

Upvotes: 3

Views: 1301

Answers (4)

zer00ne
zer00ne

Reputation: 43910

Edit 2

OP's issue concerning loading external scripts may need further testing with async and defer attributes. The following links will help in that direction:

Here's the JS equivalent of Harsh's code (if placed at the closing </body> tag):

EDIT 1

delayedBy(ms) is triggered by the onload event of <body>. You can adjust the delay.

function delayedBy(ms) {
  setTimeout('visible()', ms);
}

function visible() {
  var body = document.getElementsByTagName("body")[0];
  body.style.visibility = "visible";
}
body {
  visibility: hidden;
}
<body onload="delayedBy(1000);">
  <h1>Here I am!</h1>

</body>

Upvotes: 0

rgdesign
rgdesign

Reputation: 515

Using this: https://github.com/typekit/webfontloader Will output a class to HTML tag while loading fonts, this way:

.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive

With that you can do anything from html > to any other tag, body for example, so:

.wf-loading body{display:none;}
.wf-active body{display:block;}

Also you have callbacks to use via js, take a look, it´s working: http://fiddle.jshell.net/m2d6k8er/ it´s just a very basic example of course.

Upvotes: 0

Sofiene Djebali
Sofiene Djebali

Reputation: 4508

Hide your body in our CSS, and show it when the event DOMContentLoaded is triggered

JAVASCRIPT

  document.addEventListener("DOMContentLoaded", function(event) {
     document.body.style.display = 'block';
  });

CSS

body {
    display:none;
}

Upvotes: 2

Harsh Sanghani
Harsh Sanghani

Reputation: 1712

Just add display:none for body tag in header :-

<html>
    <head>

        <style>
            body{
                display: none;
            }
        </style>

        /* Load all your external CSS and JS */
    </head>
    <body>

        <script>
            $(document).ready(function(){
                $(body).css("display", "block");
            })
            </script>
    </body>
</html>

It may help you.

Upvotes: 0

Related Questions