Skip to main content

Difference between document.ready and window.onload/load event

Jquery $(document).ready()  function called once the DOM (Document object model) is loaded on your page. DOM means the entire html tags/script (i.e. div, table, paragraph etc.). If your web page has large images, it will not wait for loading of images completely. This method is used when we want to initialize our jQuery codes after the DOM is ready.

 // method called as soon as DOM is ready

window.onload()/load() method:-
The load event fires when all the content on your page loaded including the DOM (document object model) and images. This method gets called when images and all associated resources including the DOM (document object model) of the page have been fully loaded. Suppose your web page has large size images then until all the images are not fully loaded on the page, this method will not called.

$(window).load(function () {
    //this method called after images are loaded 

This method is called each and every partial postback of update panel but $(document).ready() is not called each and every partial postback of update panel. $(document).ready() is called only one time (during first time of page loading). Hence code written in $(document).ready() method will not be initialized each and every partial postback.

So let’s see what the differences between these two methods are:

$(document).ready() is best for one time initialization.
This method is not best for onetime initialization if used with UpdatePanel.
We can have multiple document.ready() methods on a web page that will be called in coming sequence.
We can have only one onLoad() method on a web page.
This method is called as soon as DOM is ready.
This method is called once entire DOM resources are loaded including images
This method is called slightly before than onLoad().
This method is called slighty after the $(document).ready().
It supports cross browser compatibility.
Not Cross browser compatible.
Unable to re-attach the functionality to elements/controls of the page affected by partial postbacks.
Best to re-attach the functionality to elements/controls of the page affected by partial postbacks with UpdatePanel.

Popular posts from this blog

C#: Merging Excel cells with NPOI HSSFWorkbook

In this post we’ll see how to merge the two or more cell with each other while creating the excel sheet using NPOI.
Mentioned below is code to merge multiple cells, in this example we are merging first cell to fifth cell of first row (you can adjust row or cell range by passing particular parameters in CellRangeAddress).
//Created new Workbook var hwb = new NPOI.HSSF.UserModel.HSSFWorkbook(); //Create worksheet with name. var sheet = hwb.CreateSheet("new sheet"); //Create row and cell. var row = sheet.CreateRow(0); var cell = row.CreateCell(0); ; //Set text inside cell cell.SetCellValue("This is Merged cell"); cell.CellStyle.WrapText = true; //define cell range address // parameters: -> first row to last and first cell to last cell var cra = new NPOI.SS.Util.CellRangeAddress(0, 0, 0, 4); //Add merged region to sheet. sheet.AddMergedRegion(cra);
Hope this solution helps you J

Read and parse a CSV file into an array of rows and columns in C#

The following PopulateCsvIntoArraymethod used to read the CSV file into a two-dimensional array of strings.
I have included explanation of method lines, wherever needed. ///<summary> /// Populate the CSV file into an array, /// We assume that every line has the same number of fields and there may be blank lines. ///</summary> ///<returns></returns> privatestring[,] PopulateCsvIntoArray() { // Get path of CSV file. var path = Server.MapPath("~/Folder_Name/testfile.csv"); // Get the file's text using ReadAllText method. string fileData = System.IO.File.ReadAllText(path);
// Split CSV data into lines.     fileData = fileData.Replace('\n', '\r'); string[] lines = fileData.Split(newchar[] { '\r' }, StringSplitOptions.RemoveEmptyEntries);
// Get rows and columns counts. int totalRows = lines.Length;

Calculate Sum and average of two or more Textbox values using JQuery

We can calculate sum and average of values entered in textboxes with the help of small piece of jQuery code.
First of all let’s create a HTML form where we’ll ask user to enter marks in each subject, under body section add following HTML:
<tableclass="demo-table"> <trclass="label"> <tdcolspan="2">Please enter marks(0-99):</td> </tr> <tr> <td>English</td> <td> <inputtype="text"class="txtMarks"name="txtMarks"