Introduction

Hi, I am a SharePoint front-end developer. As such, 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;

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. }
  6. function ProcessDefaultOnLoad() {
  7. ProcessPNGImages();
  8. UpdateAccessibilityUI();
  9. UpdateAnimationUserControl(false);
  10. window.setTimeout('ProcessImn()', 10);
  11. ProcessOnLoadFunctionNames(_spBodyOnLoadFunctionNames); ProcessOnLoadFunctions(_spBodyOnLoadFunctions);
  12. if (typeof _spUseDefaultFocus != "undefined")
  13. DefaultFocus();
  14. }

_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));
  4. }

Output

JavaScript

Chrome

Run 1

JavaScript

Run 2

JavaScript

Run 3

JavaScript

IE11

JavaScript

Run 1

JavaScript

Run 2

JavaScript

Run 3

JavaScript

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,

OrderChromeIE11
1ExecuteOrDelayUntilBodyLoadeddocument.ready Jquery
2Sys.Application.PageLoad.ExecuteOrDelayUntilBodyLoaded
3document.ready JquerySys.Application.PageLoad.
4SP.SOD.executeFunc: sp.js.SP.SOD.executeFunc: sp.js.
5_spBodyOnLoadFunctionNames _spBodyOnLoadFunctionNames
6_spBodyOnLoadFunction_spBodyOnLoadFunction
7ExecuteOrDelayUntilScriptLoaded:sp.core.jsExecuteOrDelayUntilScriptLoaded:sp.core.js
8Sys.WebForms.PageRequestManager.PageLoadedSys.WebForms.PageRequestManager.PageLoaded