Check if page load complete in jquery
We often see when a web page complete load (including all graphics and extreme last element on page), the some events start after few seconds, like opening a page, asking user to register.
$( window ).load(function() {
// write any code
});
This page load complete event may be helpful for identifying when to start next event to page visitor to engage them meaningfully.
Onload complete jQuery example
For example, if we want to call some JavaScript function after page load complete, additionally waiting for some more time, so visitor can look the entire layout, so we will be using JavaScript setTimeout function to call another function, like example below.
$(window).load(function () {
setTimeout(function () { alert("load complete"); }, 30000);
});
In above code, the alert message will appear after specified time of page load complete.
So far, this was completely client side script, now we add some server side code.
We want to show this message to visitor only once in entire session, means this event should not get executed again when user visit another page, so we use a session variable to keep track the same.
// call javascript from server side code.
bool uPopShown = Convert.ToBoolean(Session["uPopShown"]);
if (!uPopShown)
{
// here we call the javascript code.
Session["uPopShown"]=true;
}
In above code we are checking the current session, if not displayed, then display the message and update the session value.
Now, how you push JavaScript code into the server side “if” block. One simple way can be, write the entire code into a string variable, and push that staring value into conditional block.
System.Text.StringBuilder _strB = new System.Text.StringBuilder();
if (!uPopShown)
{
_strB.Append("<script>");
_strB.Append("$(window).load(function () {");
_strB.Append("setTimeout(function () { displayMessage(); }, 30000);");
_strB.Append("});");
_strB.Append("</script>");
}
// inside script block
@_strB.ToString();
Don’t confuse with popularly used $( document ).ready() method.
Page manipulation cannot be done, until document is ready, and to know if document is ready using following code.
$( document ).ready(function() {
console.log( "document ready!" );
});
To confirm is page load is complete, we must use $( window ).load(function(){} method only.
You may be interested to read following posts: