We Keep Coding

$(document).ready equivalant in JavaScript

I try to find equivalent code for jQuery $(document).ready, and find there are some different versions:
Version 1:
function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
Version 2:
document.addEventListener('DOMContentLoaded', fn);
What is the difference? Why version 1 will check document.readyState? Also version 1 is a function, while version 2 is an executed statement. So should there be one statement for version 1:
ready(fn);

The documentation of jQuery has the answer to your question.
jQuery.ready():
Most browsers provide similar functionality in the form of a DOMContentLoaded event. However, jQuery's .ready() method differs in an important and useful way: If the DOM becomes ready and the browser fires DOMContentLoaded before the code calls .ready( handler ), the function handler will still be executed. In contrast, a DOMContentLoaded event listener added after the event fires is never executed.…
So your Version 2 has the described problem. While Version 1 calls the passed function even after the document is already ready.

The difference is that the first one will work even if the script is executed after DOMContentLoaded has fired (see document.readyState for more), provided you add the call to ready you asked about. The second won't, because the event is only fired once, so if the script is executed after that, fn will never get called.
So how could the script be executed after the event has already fired? Basically, if it's added dynamically, not as part of the document's initial HTML. Here are a couple of examples of how that could be:
A script element added after the document has loaded.
A module loaded via dynamic import() rather than static import.
There are probably others.
Also version 1 is a function, while version 2 is an executed statement. So should there be one statement for version 1:
ready(fn);
Yes, absolutely right.
I should note that you don't need either of those if you control how the script is included in the page. (So, you do need it in libraries, but rarely in apps/pages.) If you control how the script is included in the page, and want your code to run after the DOM has been built, here are several ways you can do that (IMHO, in order of best practice):
Use type="module" on the script to make it a module. Modules aren't executed until the DOM has been built (they're auto-deferred, even inline modules; see the next bullet point).
Use defer on your script tag (only works for src script tags referring to files, not inline scripts). Deferred scripts aren't executed until the DOM has been built.
Put the script tag at the end of the document, just before the closing </body> tag.
If you do any of those things, there's no need to use ready (jQuery's or the ones in your question).

Whic spec define the ready event?

First at all, I want know the difference between the $(document).ready and the $(window).load, then I know this.
But, I have some new questions.what is the ready event, what is the detail. what is the load event.
I have find the description of load event in the HTML spec.
But I can't find the description of the ready event.

ready() is an abstraction implemented by jQuery based on DOMContentLoaded.
load() (Note this jQuery method is depreciated) is based on window.onload.
The MDN articles link to the specification.

In JavaScript window is one of core object and defines several useful events e.g. onload, before jQuery comes, if want to execute any code, once DOM is loaded completely, we use window.onload event
There is a problem with window.onload , it not exactly executed when DOM is loaded but it executes after all content including big images are loaded completely. Browser normally delay executing onload code, until all page content is loaded, because of this user can see significant delay between they first see the page and the time that code inside onload get executed, this delay is particularly notable, if your page content heavy images, flash videos or other heavy content with low bandwidth internet connection.
jQuery solves this problem by introducing ready event, you might have seen code like below in several JavaScript files or HTML pages :
$(document).ready(function(){
alert("Inside jQuery ready method");
});
here $() is a shortcut for jQuery() function, and we wrap document object into jQuery object to use ready() method. We are passing an anonymous function to ready() method, which will be executed once DOM is loaded. It doesn't wait till all DOM content available e.g. images. By the way, instead of using $(document).ready() function, you can also use following short-cut, which has same effect :
$(function() {
alert("shortcut for document.ready method in jQuery");
});
Apart from faster execution, one of the key advantage of jQuery ready method over JavaScript window onload event is that, you can use them multiple times in your page, unlike onload event, which can only be bind to a single function. Browser will ensure to execute all document.ready code to execute in the order, they are specified in the HTML page.
Hope this will be useful for you.
Thanks

jQuery onLoad x jQuery onDomready

Every time I use jsFiddle I see two options to initialize the contents via jQuery: onLoad or onDomReady.
I Tested with most of the scripts I wrote and there was no functional difference. Searching on Google I saw that one of the main differences is that via onLoad, scripts will only start running after all the elements are loaded and that includes CSS external files, JS external files, images and etc., which can be useful if you need to load JS files in a certain order, but at any given moment one of these files makes reference to another who has not been loaded yet, while via onDomReady once the HTML page content is loaded, scripts begin to be loaded already without necessarily others have been.
Got this difference right? Is there any other differences to be studied and perceived?

Making comment as answer:
One major difference, jquery ready 'pseudo' event will be fired even handler
is set after DOM is effectively 'ready', jquery using internally a
promise. Window onload event won't be fired if handler is set after
window is loaded. e.g: http://jsfiddle.net/c58a6/
It should be then noted that there is no in-build equivalent of jQuery document ready event. For example, DOMContentLoaded in-build event won't be fired if settled after the DOM is ready.

document.onload without images or other elements (just HTML)

I need to trigger a document.onload kinda event, but I want it to be triggered just when the HTML is completely loaded, without waiting for images or other elements.
I've been looking arround but I can't find something like that. Is there any way to do it?
Thanks!

You could just put a <script> tag with your code right at the bottom just before your </body> with the code to execute.
There's nothing to guarentee that images won't be loaded. But it certainly won't wait until they are loaded before it runs.

Use the DOMContentLoaded event:
https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/DOMContentLoaded
The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).
(and just for the heck of it, but with jQuery: $(document).ready(function () {});)

I don't remember a specific event for that, but you can trigger your event by putting this just before your last closing html tag:
...
<script type="text/javascript">
html_loaded(); // Custom function call
</script>
</html>
That should work very effectively for any purpose.
HTH
Francisco

The DOMContentLoaded event proposed by #Ian would work, but it is in the HTML5 specification and therefore would not be supported by legacy browsers like IE8.
Other wise I think #Chris Farmiloe's script solution is the best way to go.

Should I use window.load or document.ready jquery

Recently I saw that you could use either
$('document').ready(function() {
//Do Code
});
or
$('window').load(function() {
//Do Code
});
for jQuery.
However, they seem the same to me! But clearly aren't.
So my question is: Which one should I use for a website sort of based on animation and async? And also which one of the two is generally better to use?
Thanks.

$('document').ready runs the code when the DOM is ready, but not when the page itself has loaded, that is, the site has not been painted and content like images have not been loaded.
$(window).load runs the code when the page has been painted and all content has been loaded. This can be helpful when you need to get the size of an image. If the image has no style or width/height, you can't get its size unless you use $(window).load.

Well first of all you may want to consider using the "ready" event, which you can handler like this:
$().ready(function() {
...
});
Or, more succinctly and idiomatically:
$(function() {
...
});
The "load" handler really relates to an actual event, and can be handled on several different sorts of elements: <img> and <iframe> for example. The "load" event at the document or window level happens when all of the page's resources are loaded. The (synthesized, in some browsers) "ready" event however happens when the page DOM is ready but possibly before things like <img> contents.
Another option is to simply put your <script> tags at the very end of the <body> or even after the <body>. That way the scripts have the entire DOM to work with, but you don't have to worry about any sort of event handling to know that.