仅在下载全部内容后才如何呈现html? [英] How to render the html only after the whole content has been downloaded?

查看：51
本文介绍了仅在下载全部内容后才如何呈现html?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的网页上加载了带有动画的内容.问题在于内容开始加载时没有动画，CSS甚至还没有完成下载.我添加了 preloading bar overlay 以等待内容加载但网页会在中间加载，而动画和叠加层加载器仍无法正常工作..

最后，内容加载没有显示动画.

我发现有一个 window.stop()方法可以完全停止渲染 但是，其中有无窗口.load()方法.

  {...标题...}< script src ="mainPage/js/loading.js"</script<！-加载条计算以执行-></head><身体>< div id ="overlay">< div id ="progstat"</div< div id =进度"</div</div>< script src ="mainPage/node_modules/aos/dist/aos.js"</script<！-网络内容动画脚本，以便尽快加载->{..身体..}

来自 stackoverflow问题的

loading.js内容我能做些什么?预先感谢

编辑1

您可以尝试渐进式图像加载，如下所示: stackoverflow 以下答案也是正确的.

解决方案

使用预加载器.

  1. 创建HTML&加载程序的CSS，通常它必须占据整个屏幕.一些示例这里
  2. 在主脚本中添加一些简单的JS代码，仅在使用窗口加载监听器.我正在使用Jquery，但可以使用一些简单的香草js将其存档.

NB！:请记住，浏览器已启用缓存，因此图像仅加载一次.这里是出于测试目的而禁用缓存的方法.

下面的示例有一个预加载器和一些内容(维基百科的10MByte图片)，仅在页面&内容已完全加载:

 使用严格";$(window).on('load'，function(){$('.preloader').delay(350).fadeOut('slow');});  

 /* ------------------------------------ * \预载器\ * ------------------------------------ *//* 结构 */.preloader {位置:固定；最高:0;左:0；宽度:100％;高度:100％;z索引:100；背景颜色:#acb6e5;背景图片:线性渐变(向右，#74ebd5，#acb6e5)；}.preloader .preloader-container {职位:相对宽度:100％;高度:100％;保证金:0自动;填充:0;背景色:透明；}.preloader .logo {位置:绝对；底部:0;右:15px；宽度:90像素；高度:90px；}.preloader .preloader-content {位置:绝对；最高:50％；左:50％；宽度:100％;文本对齐:居中；转换:translate(-50％，-50％);}.preloader .preloader-content * {显示:块；保证金:0自动;}/* 盒子 */.preloader .preloader-box {宽度:75像素；高度:75像素；border-radius:3px;背景颜色:#ffffff;动画:弹跳盒500ms线性无限；}@keyframes弹跳框{17％{border-bottom-right-radius:3px;}25％{变换:translateY(9px)旋转(22.5deg)；}50％{border-bottom-right-radius:40px;变换:translateY(21px)比例尺(1，.9)旋转(45deg);}75％{转换:translateY(9px)旋转(67.5deg)；}100％{transform:平移Y(0)旋转(90deg)；}}/*盒子阴影*/.preloader .preloader-box-shadow {宽度:75像素；高度:7.5像素；边距顶部:17像素;边界半径:50％；背景颜色:#000000;不透明度:0.1;动画:反弹框阴影500ms线性无限；}@keyframes bounce-box-shadow {50％{transform:scale(1.2，1);}}/* 文本 */.preloader .preloader-text {显示:inline-block;边距顶部:25像素;字号:2em；font-weight:粗体;文本转换:大写；}/*文字点*/.preloader .preloader-text .preloader-text-dots {显示:inline-block;font-size:1.25em;}.preloader .preloader-text .preloader-text-dots span {显示:inline-block;动画:text-dot-blink 1500ms线性无限；animation-fill-mode:两者；}.preloader .preloader-content span:nth-​​child(2){动画延迟:0.2秒；}.preloader .preloader-content span:nth-​​child(3){动画延迟:.4s；}@keyframes text-dot-blink {0％{不透明度:0.2；}20％{不透明度:1；}100％{不透明度:0.2；}}/*媒体查询*/@仅限媒体屏幕和(最大宽度:481px){.preloader .logo {宽度:60像素；高度:60像素；}}  

 < script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script><！DOCTYPE html>< html lang ="zh-CN">< head>< meta charset ="UTF-8">< meta name ="viewport" content ="width = device-width，initial-scale = 1.0">< title>文档</title></head><身体><！-预加载器->< 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">载入中< div class ="preloader-text-dots">< span>.</span> < span>.</span> < span> ;.</div></div></div>< div class ="logo"></div></div></div>< h1 style ="text-align:center;">已加载图片！</h1>< p> Lorem ipsum dolor坐着，安全地服从精英，sius do eiusmod tempor indicidunt ut Labore et dolore magna aliqua.尽量不要抽烟，不要因抽烟而锻炼.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 p 
 p 
 p 
 p 
 p 
 p 
和pp，pf，fp，fp，fp，fp，pb，pb，pb，p3，p3，p3，p3，p3，p3，p3，p3，p3，p3和p3的数量均不相同.<！-大图像->< img width ="100％" height ="auto" src ="https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg"/></body></html>

希望它会有所帮助:)

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.

解决方案

Use a preloader.

  1. Create the HTML & CSS for the loader, commonly it must occupy the entire screen. Some sample HERE
  2. 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 :)

这篇关于仅在下载全部内容后才如何呈现html?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆