window.addEventListener（加載）不包括我的彈出文件

我有這個問題。當我打開我的彈出窗口後，這個div開始加載事件，儘管load listener告訴網站已經完成加載。有沒有人有建議如何包含這個背景文件，以便監聽器告訴加載完成後這個文件已被加載？window.addEventListener（加載）不包括我的彈出文件

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>

來源

2015-10-12 Robo Bayer

您可以通過，以便它加載的HTML文檔的部分加入了隱藏的圖像標籤預加載圖像資源。您可以確保您的彈出式腳本不會運行，直到通過使用document.ready（）加載此映像。

這不會告訴偵聽器，除了瀏覽器，看到所請求的相同圖像資源，它將從本地緩存中取出並返回請求的響應代碼303。

來源

2015-10-12 16:59:09

也許你可以使用DOMContentLoaded事件，因爲文檔已經完全加載和解析，而不用等待樣式表，圖像和子幀完成加載。

來源

2016-01-08 09:46:42 hafizi

window.addEventListener（加載）不包括我的彈出文件

回答

相關問題