onlyforbopi
9/19/2018 - 6:47 PM

JS.Events.PageonLoadEvent.InitinJS

JS.Events.PageonLoadEvent.InitinJS

style.css
content_copyfile_download
#pageStatus {
  border:1px solid red;
  padding: 2px;
  color:red;
}
script.js
content_copyfile_download
window.onload = init;

function init() {
  var status = document.querySelector('#pageStatus');
  status.innerHTML = 'LOADED!';
  
  // start working!
  // ....
}
js-events-pageonloadevent-initinjs.markdown
content_copyfile_download
  • Rendered
  • Source

JS.Events.PageonLoadEvent.InitinJS

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example1 of the 'load' event</title>
</head>
<body>
  <p>This page uses <code>window.onload = init;</code> in the JS code  to execute the init function ONLY WHEN THE PAGE HAS BEEN LOADED!</p>
  
  <p>This is important as very often we cannot do important things before the DOM is ready (all HTML elements have been created and can be manipulated from JavaScript).</p>
  
  <p>PAGE STATUS: <span id="pageStatus">NOT LOADED YET</span></p>
</body>
</html>