Lazyloading in Mobile App

OFFLINE

Lazyloading in Mobile App

1 year, 5 months ago
Hi Guys, We have written code to load records while scrolling down page (lazyloading) in Cordova Mobile App.

It improves UI/ UX and code is easy to manage.

Please go through below description and code:

Trick we have used: we load the records, when load-more div is visible on scrolling down.


We have implemented the same in Jito App and it's working fine.

# Please refer below code:-

We have taken code reference from Enquiry listing page of Jito App.

HTML:
<div id="enquiry-loadmore" class="loadmorediv" data-start="0">		<!-- Add  class 'loadmorediv' to your loadmore div -->
	Load More 
	<span class="loadmore-count"></span>
</div>



Java Script:
jQuery("#enquiry-loadmore").data('start',lastid);
lazyLoading();								//this function is responsible for Loading records on scroll down

function lazyLoading(){
	var temp = 1;
	$('#pages_maincontent,.search_members_wrap,ul').scroll(function(){		// 'pages_maincontent' is id of main div
		var e = $('.loadmorediv');

		if(isElementVisible(e)){

			if(e && $(".loadmorediv").is(":visible")){
		    		console.log("load");
		    		var url = window.location.href ;
		    		var id = getParameterByName('id',url);
	    		
				if(id){
	    			var is_number = Number.isInteger(id);
	    		}
	    		else{
	    			var is_number = true;
	    		}

		    	if(is_number && temp == '1'){
					jQuery(".loadmorediv").trigger("click");	// triggers when load-more div visible
					temp++;
		   		}
			}
		}
	});
}



Refer Jito App code for the same.

Note: Latest code is available on GIT.
Last Edit: 1 year, 5 months ago by Aadarsh Jain.
  • Page:
  • 1