Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between onLoad, onDomready, No wrap - in <head>, and No wrap - in <body>?

I use JSFiddle for editing my code. However, in certain codes when I'm running JavaScript or jQuery, it doesn't work unless I select "No wrap - <head>" or "No wrap - <body>".

JSFIDDLE HERE

In the fiddle above, you will notice that clicking the <button> element will not alert() you unless you've selected either the extension "No wrap - <head>" or "No wrap - <body>".

I'm a curious person who likes to understand how things work. What exactly does that option change, and why would you change it?

like image 242
Drazzah Avatar asked Nov 18 '14 02:11

Drazzah


People also ask

Which event would you use to start a script after a page has been fully loaded by the browser?

The onload event occurs when an object has been loaded. onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).

How do I know if my Dom is ready?

$( document ).ready() jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.


2 Answers

The load event is a general “loading complete” signal. It is supported by many elements. For example, external SCRIPTand IMG, IFRAME trigger it when downloading of their content finishes.

The DOMContentLoaded event triggers on document when the page is ready. It waits for the full HTML and scripts, and then triggers.All browsers except IE<9 support it.

like image 165
jamesxiang Avatar answered Nov 15 '22 18:11

jamesxiang


onLoad:

  • This means wrap the code so it will run in onLoad window event. This runs when the entire page has loaded (such as images).

onDomReady:

  • This means to wrap the code so it will run in onDomReady window event. This runs when the DOM has loaded.

no wrap - in <head>:

  • This will place your JavaScript code in the <head> section

no wrap - in <body>:

  • This will place your JavaScript code in the <body> section

I would like to note that more information can be found in jsFiddle's documentation.

like image 44
Spencer Wieczorek Avatar answered Nov 15 '22 17:11

Spencer Wieczorek