Question

在创建加载屏幕时遇到问题。想法是在所有查询/资产都被加载之前，到处都有一个黑色块。显然，在此工具中的windows.onload是这样，这是我当前无法使用的设置。所有文件都是通过jekyll生成的，但是我粘贴的是浏览器显示的最终结果。

html来源：

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta name="description" content="">  
    <link rel="icon" type="img/ico" href="assets/img/myico.ico">
    <script src="/assets/scripts/KrLoader.js" defer></script><script src="/assets/scripts/KrSearchEngine.js" defer></script>
    <link rel="stylesheet" type="text/css" href="/css/feed.css">
</head>

<body class="DefaultBody">
  <header class="Header">

  <nav class="main-menu">
    <a class="home-button" href="/feed">Home</a>
    <nav class="sub-menu">
      <a class="item" href="/">about</a>
    </nav>
  </nav>
</header>
  <main class="DefaultMain">
    <div class="DefaultContent">
    <div class = "Feed">
       <img class=BackgroundImage src='../assets/img/forest.jpg'></img>
       <div class=TopBanner></div>
       <ul class="ArticleFeed"></ul>
        </div>
    </div>
    <nav class="DefaultLeft"></nav>
    <aside class="DefaultRight"></aside>
  </main>
  <footer class="Footer">

  </footer>

</body>
</html>

进入KrLoader，该脚本旨在与此配合使用：

var assetsLoaded = false;

document.addEventListener('loaded', function (e) {
    if(assetsLoaded == true){
        var elem = document.getElementById('loadingScreen');
        if(elem){
            elem.parentNode.removeChild(elem); 
        }

    }
}, false);


window.onload = function() {
    assetsLoaded = true;
    var event = new Event('loaded');
    document.dispatchEvent(event);
};

function Loading() {

    loading = document.createElement('div');
    loading.id = "loadingScreen";

    var styles = `
    #loadingScreen {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 2;
        background-color: rgba(0,0,0,0.8);
    }`
    var styleSheet = document.createElement("style");
    styleSheet.type = "text/css";
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);
    document.body.appendChild(loading);
}


Loading();

现在，这无法按预期工作，因为../assets/img/forest.jpg加载之前，windows.onload会触发。

我尝试过的：

将加载函数改为html中的直接样式
将网址放入CSS
删除延迟
在页面末尾放置脚本

我知道我可以直接尝试查看图像是否已加载，但是我需要一种更通用的方法来处理此问题，因为最终将需要等待其他资源。理想的解决方案是，我可以将KrLoader.js固定到我拥有的任何页面上，并且可以处理所有内容。

使用window.onload

0 个答案: