Question

我有这个问题。打开弹出窗口后，这个div的后台开始加载eventhough加载监听器告诉该站点已完成加载。是否有人建议如何包含此后台文件，以便侦听器在加载此文件后告知加载完成？

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if (e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}

window.addEventListener("load", function() {
  var load_screen = document.getElementById("load_screen");
  document.body.removeChild(load_screen);
});

#about .popupBoxContent {
  /*This is the background I'm including.*/
  background: url("about_bg.png");
  background-size: cover;
  padding: 15px;
}

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">


  <link rel="stylesheet" type="text/css" href="styles.css">

  <link rel="stylesheet" type="text/css" href="pop_up.css">

  <script src="scripts.js"></script>
        < /head>

  <body>


    <div id="load_screen">
      <div id="loading">
        <object class="logo">
          <embed src="LOGO.svg" width="100%" width:"100%">
        </object >
        < /div>
    </div >

        <!-- About link-->
        < a id = "about_link"
        href = "javascript:void(0)" >
          < img class = "about_icon pop_up_icon"
        src = "about.png"
        onclick = "toggle_visibility('about');"
        onmouseover = "this.src='about_hover.png'"
        onmouseout = "this.src='about.png'" >
          < /a>

    <!--About pop up-->
    <div id="about">
      <div class="popupBoxWrapper">
        <div class="popupBoxContent" 
        style="background: url("about_bg.png") cover" >
          <h3>About</h3 >
          < p > Content goes here.< /p>
          
          <p>
            <a href="javascript:void(0)" onclick="toggle_visibility('about');">
              <img src="back_btn.png">
              <br/ >
          Back < /a>
          </p >
          < /div>
      </div >
          < /div>
   
   </body >
          < /html>

Answer 1

您可以通过添加隐藏的图片代码来预加载图片资源，以便将其作为HTML文档的一部分加载。在使用document.ready（）加载此图像之前，您可以确保弹出的脚本不会运行。

除了浏览器之外，这不会告诉监听器，看到请求的图像资源相同，将从本地缓存中提取它并返回请求的响应代码303.

Answer 2

也许您可以使用DOMContentLoaded事件，因为文档已经完全加载和解析，无需等待样式表，图像和子帧完成加载。

window.addEventListener（load）不包含我的弹出文件

2 个答案: