CODEWITHSUNDEEP
javascripthtml
Gath
Gath

Reputation:

How do I detect when a web page is loaded?

I want to write an application that detects when a page is loaded in the browser, then I should be able to insert content on top of the loaded web page? Anybody with an idea on how to do that?

Please note that I should be able to do this in any browser (Firefox/IE).

What language should I use to help me do this?

How do I detect this from an external application?

How should I integrate this with the browser?

Upvotes: 34

Views: 106841

Answers (10)

Shervin Ivari
Shervin Ivari

Reputation: 2501

This can be achieved by using events.

DOMContentLoaded : This event happens when the main HTML document is fully loaded and ready, without waiting for styles or images.

Load : This event occurs when the entire page, including all styles and images, has finished loading.

document.addEventListener("DOMContentLoaded", function() {
console.log("DOM fully loaded and parsed");
});

window.addEventListener("load", function() {
console.log("All resources finished loading!");
});

Upvotes: 0

Romain Linsolas
Romain Linsolas

Reputation: 81617

In Javascript, you have the load event.

Edit: an example:

<html>
  <head>...</head>
  <body onload="doSomethingWhenPageIsLoaded();">
    ...
  </body>
</html>

Upvotes: 2

jjclarkson
jjclarkson

Reputation: 5954

Javascript using the load event, will wait for the page to be loaded before executing.

<body onload="somecode();" >

If you're using the jQuery framework's document ready function the code will load as soon as the DOM is loaded and before the page contents are loaded:

$(document).ready(function() {
    // jQuery code goes here
});

Upvotes: 1

Nico Savini
Nico Savini

Reputation: 487

I know there are a lot of answers on this topic, but I believe the best solution is a mix of more than one, in case you don't know when your script is going to run (in my case a client could paste the script before the window load or after that event).

if (document.readyState == "complete") {
    alert("Your page is loaded");
}else{
    window.addEventListener("load", function() {
        alert("Your page is loaded");
    }, false);
}

You could create a function with this behavior and attach a callback function that does whatever you need.

Upvotes: 7

Harshal Yeole
Harshal Yeole

Reputation: 4983

Your query can be solved easily by this helpful link: OnLoad W3School

If you want loading status:

You can do that using simple Javascript

if (document.readyState == "complete") {
    alert("Your page is loaded");
}

Return Value: A String, representing the status of the current document.

One of five values:

  • uninitialized - Has not started loading yet
  • loading - Is loading
  • loaded - Has been loaded
  • interactive - Has loaded enough and the user can interact with it
  • complete - Fully loaded

For more details visit W3Schools - document.readystate.

Hope this clears your thoughts.

Upvotes: 18

Mile Mijatović
Mile Mijatović

Reputation: 3177

I prefer this solution:

 /**
  * The addEventListener() method attaches an event handler to the specified element.
  * @param {*} event Type of the event (like 'load', 'click' or 'onchange' ...)
  * @param {*} obj When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event
  * @param {*} fn Specifies the function to run when the event occurs. 
  */
 function addListener(event, obj, fn) {
    if (obj.addEventListener) {
       obj.addEventListener(event, fn, false);   // modern browsers
    } else {
       obj.attachEvent("on"+event, fn);          // older versions of IE
    }
}


// Thge event emitter will be emitted when page is loaded
addListener('load', window, function(event) {
    alert("Your page is loaded");
});

Of course, you can add more different addEventListener, for example click, onChange etc.

Upvotes: 0

Welbog
Welbog

Reputation: 60418

Javascript's OnLoad event for the body does what you want.

<body onload="somefunc();">

Upvotes: 2

Georg Sch&#246;lly
Georg Sch&#246;lly

Reputation: 126105

Better than onload is to use a function of an existing framework, because onload does sometimes respond after all the resources (images and so on) are loaded and not only the page.

For example jQuery:

$(document).ready( function() {
    // do stuff
})

Upvotes: 14

Luca Matteis
Luca Matteis

Reputation: 29267

Why not use listeners?

// Everything but IE
window.addEventListener("load", function() {
    // loaded
}, false); 

// IE
window.attachEvent("onload", function() {
    // loaded
});

This way you can add as many Listeners as you want, you can also detach them! removeEventListener and detachEvent.

Upvotes: 24

TJ L
TJ L

Reputation: 24462

You would use javascript to do this. If you don't know how to use javascript, I would recommend reading through some tutorials first.

After you have a basic understanding of javascript, you can detect when a page has loaded by using the window.onload event.

window.onload = function() {
  addPageContents();  //example function call.
}

Edit: If you want to add more than one onload function, and not use a javascript library, you can wrap your own onload hanlder.

window.whenloaded = function(fn) {
  if (window.onload) {
    var old = window.onload;
    window.onload = function() {
      old();
      fn();
    }
  } else {
    window.onload = fn;
  }
}

Upvotes: 33

Related Questions