Explore the ready and load Events

Practice exploring the JQuery DOM ready and web browser window load events.

Lab 1: The DOM ready event

Web preview of explore JQuery document ready lab.

Setup Instructions

Copy all the files from the start-03 folder to the practice folder and replace if necessary.

The lab's completed files can be found in the completed folder.

Steps:

Open the document-ready.html file in your code editor and add after the JQuery script element, the following …
```
	<script src="document-ready.js"></script>
```
… and save.
Open the document-ready.js file in your code editor and add the following …
```
$(document).on('ready', function(){
	console.log('DOM is Ready!');
});
```
… and save.
Open the document-ready.html file in your web browser and open the Sources window for the document-ready.js file and the Console window.

Use the web developer tools to show how JQuery was loaded before the document-ready.js file.

The HTML document has script element for document-ready.js file follow the script elemen for JQuery and the web browser will load them in that order. The Network window shows the order that network requests are made for files.

Use your web browser tools to narrow the listing to just script files.
DIY: Replace the ready method with the preferred technique to test for DOM being ready. Test in the web browser.
```
$(function() {
	console.log('DOM is Ready!');
});
```

Lab 2: Using the web browser window load event.

Web preview of explore JQuery window load lab.

Setup Instructions

Copy all the files from the start-01 folder to practice folder and replace if necessary.

The lab's completed files can be found in the completed folder.

Steps:

Open the window-load.html file in the web browser and open the Sources and Console windows.
Open the window-load.js file in your code editor and add the following …
```
$(window).on("load", function() {
	console.log('Window is Loaded!');
});
```
… and save.
Reload the window-load.html file in the web browser.

How did the Console window show the sequence of the events?

The load event output appeared first. The load event timing can be impacted based on the location of the resources and even if there are any resources to load.

Open the window-load.html file in your code editor and replace the following …

			<!-- ADD IMAGE HTML HERE -->

… with …

			<p><img src="https://www.filepicker.io/api/file/Mi5y3NmT3GDxaRyFni9f"></p>

… and save.

Reload the window-load.html file in the web browser.

How did the Console window show the sequence of the events?

The ready event output appeared first.