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 15 · Accepted Answer · edited Apr 24 '17 at 13:57

15


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

edited Apr 24 '17 at 13:57

Jacob van Lingen

8,989
7
48
78

answered Mar 09 '12 at 08:28

Sudhir Bastakoti

99,167
15
158
162

is there any pure javascript version of this ? – Vikas Gautam Aug 13 '16 at 12:59
It's not always working for me. Scenario: 1. make a page with large amount of pictures (100) on page 2. add event $(window).on('load', function() { window.print(); } ); 3. open this page (try many times) Not always all pictures will be visible in print dialog. Looks like on 2nd and more calls browser takes it from the cache and 'load' event fires earlier than render. – Ilya Jul 18 '23 at 10:09

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

5

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

778
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,587
26
100
160

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,284
9
53
76

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

4 Answers4

Linked