How To Render The Html Only After The Whole Content Has Been Downloaded?

August 30, 2023 Post a Comment

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 adde

Solution 1:

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-dotsspan {
    display: inline-block;
    animation: text-dot-blink 1500ms linear infinite;
    animation-fill-mode: both;
}
.preloader.preloader-contentspan:nth-child(2) {
    animation-delay: .2s;
}
.preloader.preloader-contentspan:nth-child(3) {
    animation-delay: .4s;
}
@keyframes text-dot-blink {
    0% { opacity: .2; }
    20% { opacity: 1; }
    100% { opacity: .2; }
}

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

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- PRELOADER --><divclass="preloader"><divclass="preloader-container"><divclass="preloader-content"><divclass="preloader-box"></div><divclass="preloader-box-shadow"></div><divclass="preloader-text">
            Loading
            <divclass="preloader-text-dots"><span>.</span>&nbsp;<span>.</span>&nbsp;<span>.</span></div></div></div><divclass="logo"></div></div></div><h1style="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 --><imgwidth="100%"height="auto"src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg"/></body></html>

Hope it helps :)

Code Html5

How To Render The Html Only After The Whole Content Has Been Downloaded?

Solution 1:

Post a Comment for "How To Render The Html Only After The Whole Content Has Been Downloaded?"