onload 屬性到底是資源載入完成還是渲染完成測試
阿新 • • 發佈：2018-11-22
測試圖片載入程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <script> alert('first'); </script> <body > <img class="currentImg" id="currentImg" onload="alert('img1')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523532560732&di=f4440f7230c3ac36bd87c4cb0534d56d&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F35a85edf8db1cb1353fd8b78de54564e93584bc0.jpg"/> <img class="currentImg" id="currentImg" onload="alert('img2')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523532612561&di=b7a445d548cce0bb0a833e51e034e882&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D529043615%2C3919346002%26fm%3D214%26gp%3D0.jpg"/> </body> <script> window.onload = function(){ alert('last') } </script> </html>
原理：
利用alert阻斷瀏覽器渲染
結果：
1、輸出依次是 “first”、“img2”、“img1”、“last”, 竟然先載入了第二個圖片，說明資源載入時並行的
2、瀏覽器彈屏“img2”、“img1”時圖片並未展示，說明onload呼叫時機是資源載入而非資源渲染結束後
3、去掉兩個<img>中的onload屬性發現彈屏“last”時圖片尚未渲染，即window.onload表示資源載入而非渲染結束後呼叫
4、將<img>中的URL改成錯誤的URL發現window.onload同樣呼叫了，但此時發現瀏覽器控制檯已經輸出了圖片載入失敗的error，而該<img>中的onload函式未呼叫
5、將兩個<img>中的URL都改成錯誤的URL，發現window.onload同樣呼叫了，說明其表示的是資源載入完了，至於成功與否無所謂
再測下js檔案的載入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <script> alert('first'); </script> <body > </body> <script type="text/javascript" src="../js/a.js" onload="alert('javascript')"></script> <script> window.onload = function(){ alert('last') } </script> </html>
a.js檔案的程式碼：
alert('js-content');原理：
如果a.js檔案中的程式碼執行，則1秒後會彈屏“js-content”，就利用這個特性來測試js檔案的載入和執行
結果(測試結果不一致時請清除瀏覽器快取)：
1、依次彈屏 “first”、“js-content”、“javascript”、“last”， 說明js檔案只是載入並執行後才觸發script標籤的onload函式
2、如果a.js檔案的程式碼存在語法錯誤，如下（let 拼寫錯誤），則依次彈屏 “first”、“javascript”、“last”，js程式碼不執行
alert('js-content');
le x = 0;備註：
IE瀏覽器貌似不支援onload只支援onreadystatechange事件，火狐只支援onload，不支援onreadystatechange，這個沒測試過
測試環境：Chrome瀏覽器