5 Steps to achieve Lazy Loading in SharePoint

Hello SharePointers!  
Through this blog, I will walk you through a JS library implemented by me which helps us to load SharePoint list items on demand with no trouble. All you need to do is include LazyLoading.JS file in your java script code and call its methods.

Without any delay, I will go straight to the implementation.

Problem Statement

Load 10 ( it may vary as per requirement ) list items from a SharePoint list initially and then on vertical scroll down load another 10 and so on until there are not items left in the SharePoint list.

Solution

1.        Include LazyLoading.JS in your code

2.        Initialize LazyLoading objects

3.        Call LazyLoading.Functions.loadItems() method

4.        Define onLazyLoadSuccess() and onLazyLoadFail() methods

5.        Pagination Logic

1.Include LazyLoading.JS in your code

You can download the LazyLoading.JS from my GitHubrepository. Include the JS file:

<script src="../LazyLoading.js"></script>

2.Initialize LazyLoading Objects
Initialize subsequent objects which are self-describing:

   //Initialization

LazyLoading.ListName = "MyList";

LazyLoading.PageIndex = 1;

LazyLoading.PageSize = 30;

LazyLoading.ResultCounter = 0;

LazyLoading.SiteUrl = _spPageContextInfo.siteAbsoluteUrl;

LazyLoading.ViewPortHeight = $(window).height();

LazyLoading.Context = SP.ClientContext.get_current();

LazyLoading.Web = LazyLoading.Context.get_web();

LazyLoading.List = LazyLoading.Context.get_web().get_lists().getByTitle(LazyLoading.ListName); Initialize CAML Query as well by applying filter and page size.

LazyLoading.CamlQuery = new SP.CamlQuery();

LazyLoading.CamlQuery.set_viewXml("<View><ViewFields><FieldRef Name='Title'/><FieldRef Name='Details'/></ViewFields>"+"<RowLimit>"+LazyLoading.PageSize+"</RowLimit></View>");

3.Call loadItems() methood

Make a call to loadItems()

//Loads Initial bunch of items with specified page size

LazyLoading.Functions.loadItems();

This method will load the list items with depending upon the PageSize and PageIndex value specified in step 2.                                                

4.Define onLazyLoadSuccess() and OnLazyLoadFail() methods

onLazyLoadSuccess( ) and onLazyLoadFail( ) are the callback function for loadItems( ) method. So, we need to generate the html and bind the values returned by loadItems( ).

// This function returns list items w.r.t. specified page value function onLazyLoadSuccess() {
	LazyLoading.ListEnumerator = LazyLoading.SpItems.getEnumerator();
	while(LazyLoading.ListEnumerator.moveNext()) {
	generateDynamicHTMLCode();
	}
	if( LazyLoading.ResultCounter < LazyLoading.PageSize)
	{
	$("#loadingImg").hide();
	}
	LazyLoading.Functions.managePagerControl();
	}
	//Error callback
	function onLazyLoadFail(error) {
	console.log(error);
	}
	//Generates dynamic HTML for each List Item
	function generateDynamicHTMLCode()
	{
	var htmlCode = "";
	LazyLoading.Item = LazyLoading.ListEnumerator.get_current();
	LazyLoading.ResultCounter++;
	//ID
	var itemId = LazyLoading.Item.get_item('ID');
	//Title
	var titleValue = LazyLoading.Item.get_item('Title');
	//Details
	var detailsValue = LazyLoading.Item.get_item('Details');
	//Generate HTML
	htmlCode = htmlCode + "<div>";
	htmlCode = htmlCode +"<p>"+titleValue+"</p>";
	htmlCode = htmlCode +"<p>"+detailsValue+"</p>";
	htmlCode = htmlCode + "</div>";
	$('#ItemsGrid').append(htmlCode);
	}

5.Pagination logic

To load the next bunch of data, we need call getNextPage( ) function which loads the data with updated Page Index value.

	$("#s4-workspace").scroll(function() {
	getNextPage();
	});
	//Gets next bunch of data
	function getNextPage()
	{
	if($("#loadingImg").offset().top < LazyLoading.ViewPortHeight)
	{
	LazyLoading.PageIndex = LazyLoading.PageIndex + 1;
	if (LazyLoading.NextPagingInfo) {
	LazyLoading.Position = new SP.ListItemCollectionPosition();
	LazyLoading.Position.set_pagingInfo(LazyLoading.NextPagingInfo);
	}
	else {
	LazyLoading.Position = null;
	}
	if(LazyLoading.Position != null)
	{
	LazyLoading.Functions.loadItems();
	}
	else
	{
	$("#loadingImg").hide();
	}
	}
	}

This is how we ca use LazyLoading.JS to accomplish loading of list items on demand. You can find the source code here.

Happy learning ! 😎