Question

即时使用看起来像灯箱。但我的问题是它在脚本运行之前等待整个网页完全加载..如何让我的脚本运行第一个？并且不要等待wepage加载？

的CSS：

#overlay {
    display:none;    
    position:fixed;  
    left:0px;        
    top:0px;         
    width:100%;      
    height:100%;     
    background-image:url(gray.png); 
    z-index:99999;   
}

#popup {
    display:none;
    position:fixed;       
    width:500px; 
    margin-left:400px;
    margin-right:300px; 
    top:15%;   
    height:auto;
    background-color:white;
    z-index:100000;     
border-radius: 3px;
  box-shadow: 0px 0px 0px 12px rgba(0,0,0,0.3);  
}

html：

 <script type="text/javascript">
window.onload = function() {
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "block";
        popup.style.display = "block";

        document.getElementById("CloseBtn").onclick = function(){
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "none";
        popup.style.display = "none";      
  }
};
</script>

<div id="overlay"></div>
<div id="popup">

blah blah blah

Answer 1

这正是window.onload = function() { ... }所做的。

如果您不希望它这样做，请不要告诉它。

Answer 2

使用window.onpaint。

<script type="text/javascript">
    window.onpaint = function() {
      // Do stuff
      }
    };
</script>

但是，要小心，你不能在脚本中使用DOM元素。

Answer 3

只需将脚本移至文档的末尾，就在</body>上方，然后移除window.onload：

<script type="text/javascript">
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
// ...
</script>
</body>
</html>

Answer 4

我已经尝试删除window.onload了但它不能正常工作我的括号是否正确？

 <script type="text/javascript">
        var overlay = document.getElementById("overlay"); 
        var popup = document.getElementById("popup");
        overlay.style.display = "block";
        popup.style.display = "block";

        document.getElementById("CloseBtn").onclick = function(){
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "none";
        popup.style.display = "none";      
}
};
</script>

html css javascript，如何在加载网页之前运行脚本？

4 个答案: