<html lang="en">

<head>
 <meta charset="UTF-8" />
 <title>Document</title>
</head>

<body>
 <ul>

 </ul>
</body>

</html>
ul = $("ul");
$(document).ready(function() {
	ul.append("<li>" + ("1: " + document.readyState) + "</li>");
});
// Interactive

$(function() {
	ul.append("<li>" + ("2: " + document.readyState) + "</li>");
});
// Interactive

window.onload = function() {
	ul.append("<li>" + ("3: " + document.readyState) + "</li>");
};
// Complete

// HTML4
document.onreadystatechange = function() {
	if (document.readyState == "interactive") {
		ul.append("<li>" + ("4: " + document.readyState) + "</li>");
	}
};
// Interactive

// HTML5
document.addEventListener("DOMContentLoaded", function() {
	ul.append("<li>" + ("5: " + document.readyState) + "</li>");
});
// Interactive

$(window).on("load", function() {
	ul.append("<li>" + ("6: " + document.readyState) + "</li>");
});
//	Complete

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js