[英]Load more data ajax PHP onscroll
I am working on loading around 1000 products on a page and thought of following approach of OnScroll
loading. 我正在页面上加载大约1000种产品,并想到了
OnScroll
加载的以下方法。
Below is the approach i am following: 以下是我遵循的方法:
<ul id="productContainer">
</ul>
JQuery: JQuery的:
$(document).ready(function() {
var track_load = 0; //total loaded record group(s)
var loading = false; //to prevents multipal ajax loads
var total_groups = 5;
$('#productContainer').load("loadmore",
{'group_no':track_load}, function() {track_load++;});
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() ==
$(document).height()) {
if(track_load <= total_groups && loading==false){
loading=true;
$.post('store/loadmore',{'group_no': track_load},
function(data){
$("#productContainer").append(data).fadeIn();
track_load++; //loaded group increment
loading = false;
});
}
}
});
});
PHP PHP
$items_per_group = 25;
$get_total_rows = /*count from SQL table*/
$total_groups = ceil($get_total_rows/$items_per_group);
if(isset($_POST)){
$group_number = filter_var($_POST["group_no"],
FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
if(!is_numeric($group_number)){
header('HTTP/1.1 500 Invalid number!');
exit();
}
$position = ($group_number * $items_per_group);
/*PHP Query*/
}
This solution is working pretty well but has following issues: 该解决方案运行良好,但存在以下问题:
But needed thing is that as soon as user reaches last element of current view then next products shall be loaded.
But needed thing is that as soon as user reaches last element of current view then next products shall be loaded.
How can i prevent these issues and then i will have great solution. 我如何防止这些问题,然后我将有很好的解决方案。
I tried below solution also: 我也尝试以下解决方案:
if($(window).scrollTop() + $(window).height() ==
$(document).height()-`200[height of footer]`) {}
Second solution 第二解决方案
var end = $("#copyright").offset().top;<br/>
var viewEnd = $(window).scrollTop() + $(window).height();<br/>
var distance = end - viewEnd;<br/>
if(distance <400{load products ajax}
But none of it seems working as expected 但是似乎都没有按预期工作
Here is the basic concept of checking if an element is visible within a scrollable container: http://jsfiddle.net/7fpqcqw1/ 这是检查元素在可滚动容器中是否可见的基本概念: http : //jsfiddle.net/7fpqcqw1/
window.elementInView = false;
function isScrolledIntoView(elem) {
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
window.elementInView = ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) ? true : false;
return window.elementInView;
}
Use the window.elementInView variable whereever you call isScrolledIntoView(elem) with a condition to return true only once and not calling the function anymore. 在调用isScrolledIntoView(elem)的任何地方使用window.elementInView变量,条件是仅返回一次且不再调用该函数。
This function is provided by another user in another stack overflow question: Check if element is visible after scrolling 此功能由另一个用户在另一个堆栈溢出问题中提供: 滚动后检查元素是否可见
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.