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

前端未结

关注

 1  748

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

相关标签:

1条回答

执念已碎

2021-01-27 11: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 :)

0 讨论(0)