Lazyloading in Mobile App
Lazyloading in Mobile App
5 years, 7 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:
Java Script:
Refer Jito App code for the same.
Note: Latest code is available on GIT.
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.
|
||
