[英]infinity scroll: Load all data from database and scroll to show more
我在項目中使用無限滾動。 首先,它將從MySQL數據庫中獲取一些記錄並顯示在頁面上。 頁面向下滾動后,它將向服務器進行ajax查詢並加載更多數據。
是否可以一次從json格式的mysql數據庫中獲取所有數據,然后在客戶端執行更多加載。 因此,基本上我不需要數據庫的ajax請求。
如果我在頁面滾動上發出ajax請求,則以下代碼可以正常工作。
flag = true;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()){
first = $('#first').val();
limit = $('#limit').val();
no_data = true;
if(flag && no_data){
flag = false;
$('#loader').show();
$.ajax({
url : 'ajax_html.php',
method: 'post',
data: {
start : first,
limit : limit
},
success: function( data ) {
flag = true;
$('#loader').hide();
if(data !=''){
first = parseInt($('#first').val());
limit = parseInt($('#limit').val());
$('#first').val( first+limit );
$('#timeline-conatiner').append( '<li class="year">'+year+'</li>');
$('#timeline-conatiner').append( data );
year--;
}else{
alert('No more data to show');
no_data = false;
}
},
error: function( data ){
flag = true;
$('#loader').hide();
no_data = false;
alert('Something went wrong, Please contact admin');
}
});
}
}
});
這是未經測試的,只是方法的一個示例,對不起,我沒有時間提供完整的示例,但這應該可以給您帶來啟發。
//data cache
var cache = ['one','two', 'three' .....];
//current location in cache
var current = 0;
//ajax request object
var request;
if($(window).scrollTop() + $(window).height() == $(document).height()){
var cache_total = cache.length;
//add next item to page & increase the current pointer
$('#timeline-conatiner').append( cache[current] );
++current;
if( current - cache.length < 50 ){
//if we only have 50 items not shown in cache pull next results with ajax and add to cache
if( !request ){
//also youll want to keep track if you have a pending request that hasn't returned yet, to prevent race conditions.
request = $.ajax( .... ).success( function( data ){
$.extend( cache, data ); //or push each if you like
}).always( function(){
request = false; //should be false on finish but just because.
});
} //end if request
//make sure to properly offset the data using the total in the cache to prevent pulling duplicates. eg SELECT ... LIMIT {cache.length}, 50
} // end if cached
} //end scroll
看到上面的問題是用戶需要等待ajax調用完成,這實際上將其轉換為同步請求(如重新加載頁面)。 您想要像ajax一樣保持異步。 因此,您不必緩沖ajax的結果,而是緩沖它們並保留一些未顯示的數據。 然后滾動顯示一些緩沖的數據,然后將緩存填充回去。
顯然,這使編寫代碼變得更加復雜,但是優點是您不需要一次提取大量數據,並且用戶不會因暫停ajax請求而延遲。 您必須在請求所花費的時間與緩存中的數據量之間取得平衡,以便始終在其中保留一些數據。 這取決於呈現data
需要多少空間以及ajax查詢要花費多長時間。
如果已檢索所有數據並將其添加到DOM,則以下腳本可能會有所幫助。 首先將hidden
類添加到其他元素。 創建DOM后運行此腳本。
$(".elements").each(function(index, el) { // `elements` is the common class for all elements on which this functionality is to be done
if (index >= maxLimitToShow) { // maxLimitToShow - number of elements to show in the beginning
$(el).addClass("hidden"); // for extra elements
}
});
為hidden
的類添加CSS
.hidden {
display: none;
}
並檢查滾動何時到達頁面底部以顯示更多項目。
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) { // checks if scroll reached at bottom
var elements = $(".elements.hidden"); // fetch all hidden elements
elements.each(function (index, el) {
if (index < singleRowLimit) { // singleRowLimit - number of elements to show in one scroll
$(el).removeClass('hidden');
}
});
}
});
編輯 -不使用CSS-隱藏/顯示
如果已檢索所有數據並將其添加到DOM,則以下腳本可能會有所幫助。 首先將hidden
類添加到其他元素。 創建DOM后運行此腳本。
$(".elements").each(function(index, el) { // `elements` is the common class for all elements on which this functionality is to be done
if (index >= maxLimitToShow) { // maxLimitToShow - number of elements to show in the beginning
$(el).addClass("hidden").hide(); // for extra elements
}
});
並檢查滾動何時到達頁面底部以顯示更多項目。
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) { // checks if scroll reached at bottom
var elements = $(".elements.hidden"); // fetch all hidden elements
elements.each(function (index, el) {
if (index < singleRowLimit) { // singleRowLimit - number of elements to show in one scroll
$(el).removeClass('hidden').show();
}
});
}
});
我會說您根本不需要無限滾動器(或任何其他功能)來完成您想要的工作...但是由於您的所有功能都可以很好地工作,並且我懷疑您可能會決定您希望在某種程度上重新使用“延遲加載”類型的功能點你可以做偷懶的事...
只需在示例中嘗試使用第一個參數和極限參數值即可...
說...首先= 0且限制=一些非常大的數字...
我認為您可以設置一些值,並非常容易地在頁面加載上強制單個ajax調用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.