Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript like $(document).ready() for "modern HTML5" browsers

This is most likely already a question somewhere, but I cannot find it, as EVERY single search turns up jQuery questions.

I'm looking for a proven method to bind to the document being ready, much like jQuery's $(document).ready(). However, this is for a "modern browser only" page, with very light javascript, and I'd like to avoid loading jQuery here.

Would someone kindly point me in the right direction?

Thanks!

like image 860
Randy Hall Avatar asked Mar 22 '13 21:03

Randy Hall


People also ask

What is JavaScript equivalent of document ready?

jQuery $(document). ready() Equivalent in JavaScript This event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

What is replacement of $( document .ready function?

load(function(){ // ...}) @undefined, this is almost the same as $(document). ready(function(){ ... }) . load() will wait until the graphics are also loaded.

How do I use document ready in JavaScript?

$( document ). ready() ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ). on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready. // A $( document ).

What is difference between $( function () and document Ready?

So technically they are both the same. Not major difference between these two declaration. They used based on weather you use JavaScript then you should use $(document). ready declaration in other case you use jQuery library which is a part of JavaScript then you should use $(function) declaration.


1 Answers

document.addEventListener('DOMContentLoaded', function () {     /* ... */ }); 

The event "DOMContentLoaded" will be fired when the document has been parsed completely, that is without stylesheets* and additional images. If you need to wait for images and stylesheets, use "load" instead.

* only if the <script> is before the <link rel="stylesheet" ...>

like image 108
Zeta Avatar answered Sep 26 '22 02:09

Zeta