How to detect if a page has fully rendered using jQuery?

Question

When using $(document).ready(functioon(){alert("Loaded.")}); it pops up the alert box that says "Loaded." even before the page has fully loaded (in other words there're loading still going on like images).

Any thoughts?

ready() executes for the page is loaded, which means the pure html text. If you'd like to check if all images is loaded, you may need to write more codes on some image event handlers I guess — hago, Mar 09 '12 at 08:27
In case you really want to make sure all assets are loaded you'll have to listen for each one of them. You can do something like this: http://stackoverflow.com/questions/9332167/preload-audio-files-event - the code in the answer works pretty fine — m90, Mar 09 '12 at 08:30

score 14 · Accepted Answer · edited Apr 24 '17 at 13:57

14


$(window).on('load', function() {
    //everything is loaded
});

edited Apr 24 '17 at 13:57

Jacob van Lingen

8,337
7
43
74

answered Mar 09 '12 at 08:28

Sudhir Bastakoti

97,363
15
155
158

is there any pure javascript version of this ? – Vikas Gautam Aug 13 '16 at 12:59

score 4 · Answer 2 · answered Mar 09 '12 at 08:26

4

Try out .load() instead.

$(document).load(function () {
    alert('Loaded');
}

The load event is sent to an element when it and all sub-elements have been completely loaded. http://api.jquery.com/load-event/

answered Mar 09 '12 at 08:26

Kristoffer Svanmark

768
5
11

2

The (window).load did the trick for me though. (document).load doesn't seem to fire when I tried it. – Propeller Mar 09 '12 at 09:17

score 0 · Answer 3 · answered Mar 09 '12 at 08:27

0

Using javascript

   window.onload = function () { alert("loaded"); }

answered Mar 09 '12 at 08:27

Gowri

16,119
25
97
158

score 0 · Answer 4 · answered Mar 09 '12 at 08:30

0

You can read more about it here. https://github.com/codef0rmer/learn.jquery.com/blob/master/content/jquery-basics/document-ready.md

answered Mar 09 '12 at 08:30

codef0rmer

10,079
9
48
76

How to detect if a page has fully rendered using jQuery?

4 Answers4

Linked