The document.readyState required, it can be determined where loading of the page, if the page finishes loading, the document.readyState returns 'complete';
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <img src="https://pic.cnblogs.com/face/1725689/20190826182819.png" alt=""> <script> document.addEventListener("readystatechange", function (e) { if (e.target.readyState === 'complete') { console.log("加载完成"); } else { console.log("正在加载"); } }) </script> </body> </html>
note:
1. Every document.readyState changes will trigger values readystatechange event.
2. You can also use setInterval () to achieve the same functionality.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <was>script interval = setInterval(function () { if (document.readyState === 'complete') { clearInterval(interval); console.log('加载完成'); } else { console.log('正在加载'); } }, 100); </script> <img src="https://pic.cnblogs.com/face/1725689/20190826182819.png" alt=""> </body> </html>