How do I make my websites preloader last 3 seconds before it dissapears, even if the page has loaded (stays for a minimum of 3 seconds)

Question

I need the gif to wait 3 seconds before disappearing minimum even if the page has loaded, help?

var loader = document.getElementById("loader");

window.addEventListener("load", function() {

  loader.style.height = "100px";

  loader.style.width = "100px";

  loader.style.borderRadius = "50%";

  loader.style.visibility = "hidden";

})

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="loader">
      <img src="preload.gif" width="30%"/>
    </div>
    <script src="script.js"></script>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </p>
  </body>
</html>

Does this answer your question? [Executing JavaScript after X seconds](https://stackoverflow.com/questions/8252638/executing-javascript-after-x-seconds) — Heretic Monkey, Mar 11 '20 at 18:26

ultraGentle · Answer 1 · 2020-03-11T19:05:06.043

1

You should be able to wrap your visbility = hidden line in a setTimeout:


setTimeout(() => loader.style.visibility = "hidden", 3000)

Where 3000 is the number of milliseconds you want to wait before executing the function given in the first parameter.

Here's some more on setTimeout: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#setTimeout

Edit: instead of
window.addEventListener('load', ...
Try
document.addEventListener('DOMContentLoaded', ...
which should wait for the actual content of the document to load before beginning the setTimeout

edited Mar 11 '20 at 19:05

answered Mar 11 '20 at 18:22

ultraGentle

5,084
1
19
45

I tried this already but am so confused because it isnt working idk what to do lol – Evan Medeiros Mar 11 '20 at 18:38
@EvanMedeiros Please [edit] your question with any attempt you've made to remedy your situation. If you've tried `setTimeout`, show that code. – Heretic Monkey Mar 11 '20 at 18:45
@EvanMedeiros I edited -- good luck! (Also, Heretic Monkey is right that if you've already tried a strategy, it's helpful to see that.) – ultraGentle Mar 11 '20 at 19:05

score 1 · Answer 2 · answered Mar 11 '20 at 19:01

Welcome to SO :)
In first line of your html code, put this:

<script>
    const renderTimeStart = new Date();
    function hidePreloader(){
        // Do hiding stuff here...
        const loader = document.getElementById("loader");
        loader.style.visibility = "hidden";
    }       

    function scheduleHidePreloader(renderTimeStart){
        const passedTimeMilliSeconds = new Date() - renderTimeStart;
        const renderAfterMilliSeconds = 3000 - passedTimeMilliSeconds;
        setTimeout(hidePreloader, renderAfterMilliSeconds);
    }


    window.addEventListener("load", () => {
        scheduleHidePreloader(renderTimeStart);
    }
</script>

This way, if preloader is called before 3000 milliseconds, the renderAfterMilliSeconds will calculate the rest of needed time and will be called by timeout.
Otherwise, if it has passed more than 3000 milliseconds, the timeout will receive a negative value and will be called immediately.

Don't forget that whole functionality of this code depends on the const renderTimeStart = new Date(); line to be called in first lines of your html, before any importing resources.

How do I make my websites preloader last 3 seconds before it dissapears, even if the page has loaded (stays for a minimum of 3 seconds)

2 Answers2