Apply . css styles before displaying page

Asked

Viewed 51 times

0

I don’t have much experience in web programming. On the website I’m creating was having a problem with the graphical formatting of . css not be soon applied and create weird effects when showing the page, and did not find solution on the web. I don’t know if it’s the best way to program, but my solution, where the page is only shown after all styles . css applied, was:

In the 'body' tag create an id and 'Hidden' in the class, on the _Layout.cshtml page (generate all other pages), and within the 'head' tag and the 'script' the jquery $(Document) function. ready (...): And the body section is only shown after styling. It also does not seem to affect the wait times the page is shown and my file . css is not yet 'minified'/optimized.

<head>
<script>
        $(document).ready(function () {
            //... outro código 

            // NO FIM DA FUNÇÃO:
            var b = document.getElementById("body_id");
            b.className = "";
        });
</script>
</head>
<body id="body_id" class="hidden">
  <!-- design da página -->
</body>

  • you should include a more complete example about the problem you are facing.

  • This was the solution I found and works, I just don’t know if there are specific commands to make the page wait for the file . css is deployed before the page shows on the screen. As I have learned a lot from the site I decided to post something that I can’t find a solution on the web.

  • This is already the expected behavior, as long as you structure your html correctly. Maybe what you can improve is to make the Preload of some more important visual references, but without seeing your html and css you can’t help.

  • Instead of $(document).ready(function () { use $(window).on('load', function () {

  • There are some JS libraries that do this https://www.createjs.com/preloadjs search Google for "Preload css Assets"

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.