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?

Answer 1

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

Answer 2

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/

Answer 3

Using javascript

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

Answer 4

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