Display div only after full load (Preloader)

0

Hello, everyone!

I do not know anything about javascript, but I would like to change this js code so that the contents of a particular div only appear after loading it and not after loading the whole page .

I would like the div .preloader "to appear while the" .content "div is loaded. With full loading, the ".preloader" div disappears and the ".conload" div is displayed while the browser continues to load the scripts that are before the body closes. >

I do not want to use jQuery in the head, so I can optimize the loading time of the content and it only loads after the page is displayed.

In other words, it is a preloader of a div rather than the entire page.

I would also like the .preloader div to show a progress bar based on loading the .content div with Javascript and CSS only.

<html>

<head>
  <script>
    $(window).load(function() {
      $('.preloader').fadeOut('slow', function() {
        $(this).remove();
      });
    });
  </script>
</head>

<body>
  <div class="preloader"></div>
  <div class="conteudo">
    <header></header>
    <main>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
    </main>
    <footer></footer>
  </div>
  <script src="jquery"></script>
  <script src="config"></script>
  <script src="wow"></script>
</body>

</html>
    
asked by anonymous 14.01.2017 / 18:10

1 answer

0

Using '$' should ensure that your page or project is making use of the local jQuery file or online. In your case, try to add in the jQuery source script using: src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"

  
    

link

  
    
30.10.2017 / 16:38