Sequence Of JavaScript Function Loaded After The UI Has Been Loaded in SharePoint 2013

javascript load output sharepoint 2013.png
InfoPath alternatives for form designing SharePoint

As a SharePoint front-end developer it is important to understand the client life cycle in terms of DOM, Browser engine, etc. We will be talking about the Onload process in this post. There are different techniques used to Provide our custom JavaScript code loaded before / in the middle / alter OnLoad events in SharePoint.

Read some SharePoint 2013 tutorials:

Here we will see 8 different techniques used for the 0nload process. Below are the specified Techniques. Below are the code snippets for each technique in use.

Sys.Application.PageLoad

  1. Sys.Application.add load(SPLoad);
  2. function SPLoad(){
  3.     console.log(“Sys.Application.PageLoad.Time:” + ((Date.now()) – performance.timing.navigationStart))
  4. }

Sys.WebForms.PageRequestManager.PageLoaded

  1. Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(SPPageLoaded);
  2. function SPPageLoaded(sender,args){
  3.     console.log(“Sys.Webforms.PageRequestManager.PageLoaded.Time:” + ((Date.now()) – performance.timing.navigationStart))
  4. }





Document.ready Jquery

  1. jQuery(document).ready(jqueryLoadsSP);
  2. function jqueryLoadSP(){
  3.     console.log(“Document.ready Jquery.Time:” + ((Date.now()) – performance.timing.navigationStart))
  4. }
  5. function ProcessDefaultOnLoad() {
  6.     ProcessPNGImages();
  7.     UpdateAccessibilityUI();
  8.     UpdateAnimationUserControl(false);
  9.     window.setTimeout(‘ProcessImn()’, 10);
  10.     ProcessOnLoadFunctionNames(_spBodyOnLoadFunctionNames);     ProcessOnLoadFunctions(_spBodyOnLoadFunctions);
  11.     if (typeof _spUseDefaultFocus != “undefined”)
  12.         DefaultFocus();
  13. }

_spBodyOnLoadFunctionNames

  1. _spBodyOnLoadFunctionNames.push(‘OnPageLoad’);
  2. function OnPageLoad(){
  3.     console.log(“_spBodyOnLoadFunctionNames. Time: ” + ((Date.now()) – performance.timing.navigationStart));
  4. }

_spBodyOnLoadFunctions

  1. _spBodyOnLoadFunctions.push(raiseFunc);
  2. var raiseFunc = function(){
  3.     console.log(“_spBodyOnLoadFunction. Time: ” + ((Date.now()) – performance.timing.navigationStart));
  4. };

ExecuteOrDelayUntilScriptLoaded:sp.core.js

  1. ExecuteOrDelayUntilScriptLoaded(MyFunction, “sp.core.js”);
  2. function MyFunction(){
  3.     console.log(“ExecuteOrDelayUntilScriptLoaded:sp.core.js. Time: ” + ((Date.now()) – performance.timing.navigationStart));
  4. }

SP.SOD.executeFunc: sp.js

  1. SP.SOD.executeFunc(‘sp.js’, ‘SP.ClientContext’, sharePointReady);
  2. function sharePointReady(){
  3.     console.log(“SP.SOD.executeFunc: sp.js. Time: ” + ((Date.now()) – performance.timing.navigationStart));
  4. }

ExecuteOrDelayUntilBodyLoaded

  1. ExecuteOrDelayUntilBodyLoaded(delayBody);
  2. function delayBody(){
  3.     console.log(“ExecuteOrDelayUntilBodyLoaded. Time from NavStart: ” + ((Date.now()) – performance.timing.navigationStart));

}

Output

Chrome

Run 1



javascript load output sharepoint.png
javascript load output sharepoint.png

Run 2

javascript load output sharepoint online.png
javascript load output sharepoint online.png

Run 3

 

javascript load output sharepoint 2013.png
javascript load output sharepoint 2013.png

IE11

http://localhost:12813/pc/

javascript load output sharepoint 2013.png
javascript load output sharepoint 2013.png

Run 1

javascript load sequence output sharepoint.png
javascript load sequence output sharepoint.png

Run 2

javascript load sequence output sharepoint.png
javascript load sequence output sharepoint.png

Run 3

javascript load sequence output sharepoint online.png
javascript load sequence output sharepoint online.png

As you see the above images of the output of the code snippet run on both chrome and IE11 browsers, here we discover the sequence of execution.

We will talk about both the sequences,




Order Chrome IE11
1 ExecuteOrDelayUntilBodyLoaded document.ready Jquery
2 Sys.Application.PageLoad. ExecuteOrDelayUntilBodyLoaded
3 document.ready Jquery Sys.Application.PageLoad.
4 SP.SOD.executeFunc: sp.js. SP.SOD.executeFunc: sp.js.
5 _spBodyOnLoadFunctionNames _spBodyOnLoadFunctionNames
6 _spBodyOnLoadFunction _spBodyOnLoadFunction
7 ExecuteOrDelayUntilScriptLoaded:sp.core.js ExecuteOrDelayUntilScriptLoaded:sp.core.js
8 Sys.WebForms.PageRequestManager.PageLoaded Sys.WebForms.PageRequestManager.PageLoaded

– ExecuteOrDelayUntilBodyLoaded function is always executed first in chrome (but at this stage we cannot access  SP methods). Whereas the document.ready Jquery function is executed first in IE11.

– This could be useful to execute our custom code at a really early stage in the OnLoad process keeping in mind the order of execution.

– There are two SharePoint onLoad functions _spBodyOnLoadFunctionNames and _spBodyOnLoadFunction. Always executed in the order. SO, if we want to execute some code after all functions included by us (or other devs) in _spBodyOnLoadFunctionNames, then it is useful to use this one _spBodyOnLoadFunction, because is executed the last.


– If we want to execute some functions after all functions (SP, after load functions, Yammer, etc.) we can use this function to attach the OnLoad event -> Sys.WebForms.PageRequestManager.PageLoaded.

– I have referred to an article to implement this particular functionality, check the URL.


You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply