如何仅为加载时间超过一定时间的网页实现页面加载器动画？

Question

我通过在我的 JavaScript 中调用 window.onload() 获得了一个页面加载器动画，目前它正在成功运行，但我想调整代码，以便加载器动画仅在以下情况下触发该网页需要超过一定的时间来加载。我试图避免每次用户导航到新页面时都显示动画，并且只在必要时显示。

下面是我目前的HTML、CSS和JS代码，如果有帮助的话。

HTML:

<div class="loader">
        <img class="loading-gif" src="./assets/img/loading.gif" alt="Page Loading...">
</div>

CSS:

.loader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-gif {
    width: 100px;
}

.loader.fade-out {
    animation: fadeOut var(--speed);
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

JavaScript:

window.onload = function() {
    const loader = document.querySelector(".loader")
    loader.classList.add("fade-out")
}

非常感谢您提供的任何帮助！

Answer 1

你可以试试这个，但我不是 100% 确定。基本上把所有html都变成文本，然后注入到一个根div；如果没有找到最慢的内容，有条件地加载页面加载器，并再次检查直到找到淡出加载器。

 window.onload = function() {
   
          let yourContent = `<div>
              Your site's content:
              <div>Content A</div>
              <div>Content B</div>
              <div id="check">Content C</div>
            </div>`
          
          let loader = `<div class="loader">
              <img class="loading-gif" src="./assets/img/loading.gif" alt="Page Loading...">
          </div>`;
          
          let wrap = document.getElementById("loader-wrap");
  
          let root = document.getElementById("root"); 
   
          //switch these for loader render
          root.innerHTML = yourContent;
          // setTimeout(()=>root.innerHTML = yourContent,1000);
   
          let interval = setInterval( ()=> {
             console.log("checking...")
             
             if(root.children[0]){
               let check = document.getElementById("check")
               if(check.textContent === "Content C"){
                 const loader = document.querySelector(".loader");
                 if(loader) loader.classList.add("fade-out");
                 //don't forget to clear it
                 clearInterval(interval);
                 console.log("done")
               }

             } else {
               if(!wrap.children[0]) wrap.innerHTML = loader;
             }
          },100)
                
    }

    .loader {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1001;
        width: 100%;
        height: 100%;
        background: var(--bg-color);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .loading-gif {
        width: 100px;
    }

    .fade-out {
        animation: fadeOut 1s;
        animation-fill-mode: forwards;
    }

    @keyframes fadeOut {
        100% {
            opacity: 0;
            visibility: hidden;
        }
    }

 <div id="root">
      
 </div>
 <div id="loader-wrap">

</div>

Answer 2

一句话，这不可能。要实现此效果，您需要提前知道客户端下载您的网页的速率以及网页初始呈现所需的资源。您无法知道，甚至无法可靠地预测客户端的下载速率随时间的变化，因为影响网络状况的变量太复杂了。例如，最终用户可能会在下载您的网页时进入隧道，导致可用下载带宽突然且不可预测地减少，或者最终用户设备上的其他应用程序可能会发出与正在进行的下载竞争带宽的网络请求。

近似此效果的最佳方法是使用 XMLHttpRequest 的 onprogress 事件来确定当前下载速率和正在传输的资产的大小，以计算何时传输资产将完成下载，假设下载速率保持不变。

您可以使用下面的代码片段来了解如何估算效果。

const xhr = new XMLHttpRequest();
xhr.open('GET', '/myasset.json}', true);

xhr.onprogress = e => {
    if (e.lengthComputable) {
        const percentComplete = (e.loaded / e.total) * 100;
        console.log(percentComplete, 'percentComplete');
    }
}

xhr.onload = function() {
        console.log("loaded");
}

xhr.send();

如何仅为加载时间超过一定时间的网页实现页面加载器动画？

How to implement a page loader animation only for webpages that take more than a certain amount of time to load?

html

javascript

css

pageload