I have implemented lazy load of content on my webpage in the following way:
Initial Load: func1: Get information of 10 brands via ajax call(Also returns total expected data). func2: Get products information of the 10 brands recieved in above function via ajax.
if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
if(totaldatarecvd < totalExpectedData){
func1: Get information for next 10 brands via ajax call.
func2: Get products information of the 10 brands recieved in above function via ajax.
}
}
Issue: On Google chrome it works Fine, while on Mozilla Firefox when user has scrolled the screen 70% multiple ajax requests are being made and thus the order of data rendered gets disrupted. Expected: When 70% screen scrolled, make one ajax request to fetch next 10 data. On further scroll fetch next 10 brands and so on.
Please suggest how can lazy load be implemented with one request at a time.
I believe you are experiencing this behavior because when you scroll a page using, for example, the wheel of a mouse, what you are actually doing is scrolling the page for X pixels at a time (say, 20 pixels with one wheel "scroll"). The scroll event, however, is triggered every time the page is scrolled down 1 pixel. Therefore, any functionality you have assigned to the scroll event should theoretically be executed 20 times per each wheel "scroll".
Solution: Add a (global) variable that will control whether the desired scroll position has been reached (and therefore a data load has been initiated), and use that to prevent multiple data load requests. The variable should initially be set to false, and once the desired scroll position has been reached, set to true and initiate the data load.
Don't forget to set it to false after the data load has been completed, else it will only work for the first time.
dataLoading = false;
if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7 && !dataLoading){
dataLoading = true;
if(totaldatarecvd < totalExpectedData){
func1: Get information for next 10 brands via ajax call.
func2: Get products information of the 10 brands recieved in above function via ajax.
}
}