Alternative for "$(document).ready" function

Question

I am using fancybox in an aspx page. The document ready function does not work in this page for a lightbox. Someone told me to write a new javascript code for loading the lightbox in that page.

If you want to execute your script when everything is loaded use `$(window).load(function(){ // ...})` — undefined, Sep 11 '12 at 09:15
@undefined, this is almost the same as `$(document).ready(function(){ ... })`. `load()` will wait until the graphics are also loaded. — alexbusu, Sep 11 '12 at 09:19
Why is $(document).ready not working? You do have jQuery included right? — TheNameless, Sep 11 '12 at 09:42

score 41 · Answer 1 · answered Sep 11 '12 at 09:51

41

Include jQuery.
Check network tab that you are not getting 404.
Check console that you are not getting "$ is unknown".

Do stuff when DOM is ready.

$(function(){
   // DOM Ready - do your stuff 
});

answered Sep 11 '12 at 09:51

4

I think he means alternative to jquery load event – Claudiu Dec 20 '13 at 17:15
2

regardless of what the OP meant, I keep revisiting this page via Google (because I seem to forget this nifty convention). Thanks @user338195! – kingPuppy Dec 30 '14 at 19:43

score 38 · Answer 2 · answered Dec 20 '13 at 17:16

38

Try this:

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

Works in modern browers and IE9+

answered Dec 20 '13 at 17:16

Claudiu

2,722
1
29
32

Keep in mind that this won't work if the DOM has already loaded. If that's going to be a problem, take a look at these answers instead: https://stackoverflow.com/q/799981 https://stackoverflow.com/q/9899372 – Pikamander2 Sep 24 '19 at 12:26

score 7 · Answer 3 · answered Sep 11 '12 at 09:18

7

You could use the standard js onload function to run if that's what your'e missing:

window.onload = function() {};

Do note that this might give you issues with libraries - I haven't investigated that.

answered Sep 11 '12 at 09:18

LasseValentini

256
1
3

score 3 · Answer 4 · answered Dec 23 '14 at 12:49

3

best ways is to use like this:

jQuery.noConflict();
(function($) {
  $(function() {
   // by passing the $ you can code using the $ alias for jQuery
   alert('Page: ' + $('title').html() + ' dom loaded!');
  });
})(jQuery);

answered Dec 23 '14 at 12:49

Harshal Lonare

2,198
25
29

score 3 · Answer 5 · answered Aug 13 '18 at 21:41

3

I believe using the script defer tag is the best solution. For example,

<script src="demo_defer.js" defer></script>

More information at W3 Schools.

answered Aug 13 '18 at 21:41

Mark Jackson

2,337
3
22
21

Alternative for "$(document).ready" function

5 Answers5

Linked