How to check that web page is loaded 100 percent?

Question

Is there any way to check that, web page is loaded 100 percent in javascript?

100 percent means all the images,files,scripts,styles everything that a web page contains.

`$(window).load()` event is fired when complete page is fully loaded, including all frames, objects and images — Satpal, Feb 20 '14 at 13:12
Please clarify. What does 100% mean. Only the page? Also styles? images? the contents of all iFrames? — John Dvorak, Feb 20 '14 at 13:14
Also, you are asking how to do this in javascript but you also have a jquery tag. Are you looking for jquery or javascript code? — GiveMeAllYourCats, Feb 20 '14 at 13:17

Daan · Answer 1 · 2021-01-04T10:20:43.540

8

if (document.readyState === "complete") {

}

That it what you need to check if the page is loaded for 100%.

If you want to trigger a function after the DOM Content is loaded, use:

document.addEventListener("DOMContentLoaded", function() {
  
});

edited Jan 04 '21 at 10:20

answered Feb 20 '14 at 13:12

Daan

2,680
20
39

Doesn't wait for anything but the DOM. Please note the question was updated. – John Dvorak Feb 20 '14 at 13:30
@JanDvorak He didn't ask for a code that would wait for the document to fully load, he asked for a way to check if the page loaded. Which can be done with `if (document.readyState === "complete") { }`. Please read the question before downvoting my answer. Also, if the `document.readyState` is set to `complete` it means everything is loaded (100%). – Daan Feb 20 '14 at 13:32
1

Removed my vote because you removed `$(document).ready`. That second part indeed wasn't what the asker wanted. – John Dvorak Feb 20 '14 at 13:40
can we get the percentage of resources loaded? like images,scripts etc etc? – techie_28 Mar 30 '16 at 09:54

score 3 · Accepted Answer · answered Feb 20 '14 at 13:11

3

You can use the window.onload function for that. E.g.

window.onload = function () { alert("It's loaded!") }

answered Feb 20 '14 at 13:11

Sidney Gijzen

1,931
3
24
27

score 1 · Answer 3 · answered Feb 20 '14 at 13:10

1

Yes, window.onload:

window.onload = function () {
    // web page is loaded
}

answered Feb 20 '14 at 13:10

GiveMeAllYourCats

890
18
23

vekah · Answer 4 · 2014-02-20T13:26:36.783

0

What do you mean with 100% ?

You can verifiy that DOM is fully loaded with <body onreadystatechange="functionCalled();"> Or with jQuery syntax : $(document).ready(function() {});

But it won't wait for images, for instance.

EDIT

And if you want to check the readystate of dynamically loaded content, you still can use .ready method of jQuery. But you have to use it on the selector of what you load, not on body or window, or document.

$(document).ready(function() {
  ready=true;
  $('img,link').each(function() {
    if(!$(this).load(function() {
      ready=false;
    });
  });
});

edited Feb 20 '14 at 13:26

answered Feb 20 '14 at 13:11

vekah

980
3
13
31

100 percent means => all the images , files , scripts are loaded!! – Dixit Singla Feb 20 '14 at 13:12
1

@DixitSingla, use `$(window).load()` – Satpal Feb 20 '14 at 13:13
@DixitSingla please clarify that in the question, not as a comment to one of the answers – John Dvorak Feb 20 '14 at 13:13
`$().ready` ignores its argument... – John Dvorak Feb 20 '14 at 13:25
Why `$(this).load` every element separately, rather than the whole document? – John Dvorak Feb 20 '14 at 13:28
In case of dynamycally loaded contents ... And you can know which elements is not ready. Instead of just know that everything is not loaded ... – vekah Feb 20 '14 at 13:36

How to check that web page is loaded 100 percent?

4 Answers4