How to render the html only after the whole content has been downloaded?

Question

My webpage has content that loads with animation applied to them. The problem is the content starts loading without the animation, CSS hasn't even finished downloading. I have added a preloading bar overlay to wait for the content loading BUT the webpage loads in middle without the animation and overlay loader is still working..

At the end content loads without animation shown.

I found that there is a window.stop() method which can completely stop rendering BUT there is NO window.load() method.

{...heading...}
<script src="mainPage/js/loading.js"></script> <!-- loading bar calculation to perform -->
</head>

<body>
<div id="overlay">
    <div id="progstat"></div>
    <div id="progress"></div>
</div>
<script src="mainPage/node_modules/aos/dist/aos.js"></script> <!-- web content animation script so that it loads as soon as possible -->
{..body..}

loading.js content from stackoverflow question What can I do? Thanks in advance

EDIT 1

You can try doing Progressive image loading as here stackoverflow Below answer is also correct.

Is [PACE](https://github.hubspot.com/pace/docs/welcome/) what are you looking for??? — Carlo Corradini, Jul 01 '20 at 16:43
Thanks for the suggestion. **BUT** what I'm looking for is to **stop rendering the page like with method window.stop()** and start rendering it **with animation** as soon as the content is completely downloaded. PACE didn't solve the problem. — Anurag Dhadse, Jul 01 '20 at 17:18

score 1 · Accepted Answer · answered Jul 01 '20 at 17:54

Use a preloader.

Create the HTML & CSS for the loader, commonly it must occupy the entire screen. Some sample HERE
In the main script add some simple JS code to hide the preloader only when the page is fully loaded using the window load listener. I am using Jquery but the same can be archived using some simple vanilla js.

NB!: Remember that the browser has caching enabled so the image is loaded only once. HERE is how to disable cache for testing purpose.

Example below has a preloader and some content (a 10MByte image from wikipedia) to show only when the page & content is fully loaded:

"use strict";

$(window).on('load', function () {
    $('.preloader').delay(350).fadeOut('slow');
});

/*------------------------------------*\
  PRELOADER
\*------------------------------------*/
/* Structure */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: #acb6e5;
    background-image: linear-gradient(to right, #74ebd5, #acb6e5);
}
.preloader .preloader-container {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: transparent;
}
.preloader .logo {
    position: absolute;
    bottom: 0;
    right: 15px;
    width: 90px;
    height: 90px;
}
.preloader .preloader-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%, -50%);
}
.preloader .preloader-content * {
    display: block;
    margin: 0 auto;
}
/* Box */
.preloader .preloader-box {
    width: 75px;
    height: 75px;
    border-radius: 3px;
    background-color: #ffffff;
    animation: bounce-box 500ms linear infinite;
}
@keyframes bounce-box {
    17% { border-bottom-right-radius: 3px; }
    25% { transform: translateY(9px) rotate(22.5deg); }
    50% {
        border-bottom-right-radius: 40px;
        transform: translateY(21px) scale(1,.9) rotate(45deg);
    }
    75% { transform: translateY(9px) rotate(67.5deg); }
    100% { transform: translateY(0) rotate(90deg); }
}
/* Box Shadow */
.preloader .preloader-box-shadow {
    width: 75px;
    height: 7.5px;
    margin-top: 17px;
    border-radius: 50%;
    background-color: #000000;
    opacity: 0.1;
    animation: bounce-box-shadow 500ms linear infinite;
}
@keyframes bounce-box-shadow {
    50% { transform: scale(1.2, 1); }
}
/* Text */
.preloader .preloader-text {
    display: inline-block;
    margin-top: 25px;
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
}
/* Text Dot */
.preloader .preloader-text .preloader-text-dots {
    display: inline-block;
    font-size: 1.25em;
}
.preloader .preloader-text .preloader-text-dots span {
    display: inline-block;
    animation: text-dot-blink 1500ms linear infinite;
    animation-fill-mode: both;
}
.preloader .preloader-content span:nth-child(2) {
    animation-delay: .2s;
}
.preloader .preloader-content span:nth-child(3) {
    animation-delay: .4s;
}
@keyframes text-dot-blink {
    0% { opacity: .2; }
    20% { opacity: 1; }
    100% { opacity: .2; }
}

/* Media Query */
@media only screen and (max-width: 481px) {
    .preloader .logo {
        width: 60px;
        height: 60px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <!-- PRELOADER -->
    <div class="preloader">
      <div class="preloader-container">
        <div class="preloader-content">
          <div class="preloader-box"></div>
          <div class="preloader-box-shadow"></div>
          <div class="preloader-text">
            Loading
            <div class="preloader-text-dots">
              <span>.</span>&nbsp;<span>.</span>&nbsp;<span>.</span>
            </div>
          </div>
        </div>
        <div class="logo"></div>
      </div>
    </div>
  
    <h1 style="text-align: center;">IMAGE LOADED!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <!-- LARGE IMAGE -->
    <img width="100%" height="auto" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg"/>
</body>
</html>

Hope it helps :)

Thanks for the Answer. I'm trying to work around to **load a smaller image** with blur effect first as *placeholder* and then **replacing it with actual image after loading** and deblurring it. I'll try your solution as soon as this works. — Anurag Dhadse, Jul 01 '20 at 18:52
follow the new [thread](https://stackoverflow.com/q/62685219/8277795) I just created — Anurag Dhadse, Jul 01 '20 at 21:01
@AnuragDhadse If you want a preloader remember that the image must be very small in size, use a simple GIF. — Carlo Corradini, Jul 01 '20 at 21:31

How to render the html only after the whole content has been downloaded?

1 Answers1

Linked