首頁 > 文章 > web前端 > JavaScript實例解析之window頁面載入事件

JavaScript實例解析之window頁面載入事件

WBOY轉載: 2022-08-05 09:24:082577瀏覽

這篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了window視窗事件，window.onload是視窗（頁面）載入事件，當文件內容完全載入完成後才會觸發該事件，下面一起來看一下，希望對大家有幫助。

##」視窗頁面加載事件

window.
onload
 = function() {}或者 window.addEventListener(&#39;
load
&#39;, function() {});

window.onload是視窗（頁面）載入事件，當

文件內容完全載入完成後才會觸發該事件（包括圖片、腳本檔案、CSS檔案等）。

注意：

#有了window.onload就可以把js程式碼寫到頁面元素的上方，因為onload是等頁面內容全部加載完畢，再去執行處理函數；
#window.onload傳統註冊方式只能寫一次，如果有多個，就會以最後一個window.onload為準。
而用window.addEventListener('load', function() { })則沒有限制。

document.addEventListener(
&#39;DOMContentLoaded&#39;
, function() { })

DOMContentLoaded事件觸發時，僅

當DOM載入完成，不包括樣式表、圖片、flash等等。

如果頁面的圖片很多的話，從使用者造訪到onload觸發可能需要較長的時間，互動效果就不能實現，必然影響使用者的體驗，此時用

DOMContentLoaded比較合適。

調整視窗大小的事件

window.onresize = funtion(){}
window.addEventListener("resize",funtion(){});

window.onresize是調整視窗大小的載入事件，只要

視窗大小發生像素變化時就會觸發並調用的處理函數。經常利用這個事件完成響應式佈局。

window.innerWidth目前螢幕的寬度。

3f1c4e4b6b16bbbd69b2ee476dc4f83a
      window,addEventListener('resize',function(){
          console.log(window.innerWidth);
      })
     2cacc6d41bbb37262a98f745aa00fbf0

補充：

pageshow事件，這個事件在頁面顯示時觸發，無論頁面是否來自快取。在重新載入的頁面中，pageshow會在load事件觸發後觸發；

根據事件物件中的 persisted 來判斷是否為快取中的頁面觸發的pageshow事件。

範例如下：

window.onload是視窗(頁面)載入事件,當文件內容完全載入完成會觸發該事件(包括圖片、腳本檔、CSS檔案等),就調用的處理函數；

有了window.onload就可以把JS程式碼寫到頁面元素的上方,因為onload是等頁面內容全部載入完畢,再去執行處理函數;

window.onload傳統註冊事件方式只能寫一次,如果有多個,會以最後-個window.onload為準；

如果使用addEventListener則沒有限制；

DOMContentLoaded事件觸發時,僅當DOM載入完成,不包括樣式表,圖片, flash等；

le9以上才支援;

如果頁面的圖片很多的話，從使用者造訪到onload觸發可能需要較長的時間，可用DOMContentl oaded事件；

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
    93f0f5c25f18dab9d176bd4f6de5d30e
        a80eb7cbb6fff8b0ff70bae37074b813
        b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
        46d5fe1c7617e3914f214aaf043f4ccf

        531ac245ce3e4fe3d50054a55f265927
        8019067d09615e43c7904885b5246f0a

        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })

        window.addEventListener('load', function() {
 
            alert(22);
        })

        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })
    
        2cacc6d41bbb37262a98f745aa00fbf0
    9c3bca370b5104690d9ef395f2c5f8d1
    6c04bd5ca3fcae76e30b72ad730ca86d    
        a5d9cc459240d83bcb5c71b35fa6d7f1请点击65281c5ac262bf6d81768915a4a77ac0
        
    36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

運行情況；

先彈出這個；這是DOM載入完成彈的；