Lazyloading in Mobile App

OFFLINE

Lazyloading in Mobile App

11 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: 11 months ago by Aadarsh Jain.
  • Page:
  • 1