Div display only after full upload of the same (Preloader)

Asked

Viewed 175 times

0

Hello, everybody!

I don’t 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 entire page.

I would like you to div ".preloader" is displayed while the div ".content" is loaded. With the load complete, the div ". preloader" disappears and the div ". content" is displayed, while the browser continues to load the scripts that are before the close of the "body".

I don’t want to use jQuery at the head, so I can optimize the loading time of the content and it is only loaded after the page display.

In other words, it is a preloader of a div and not of the full page.

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

<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>

javascript javascript-events

1 answer

0

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

https://www.w3schools.com/jquery/jquery_get_started.asp

Browser other questions tagged javascript javascript-events

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