[英]Infinite scrolling MySQL PHP jQuery
下面的代碼顯示了使用jQuery和php的無限滾動功能。 我有兩個我似乎無法解決的問題...
我的第一個問題:我知道,這被稱為“無限”滾動。 但是非常荒謬的是,向下滾動到頁面底部時加載的內容實際上是“無限的”(重復出現,當我實際上不希望有任何重復的時候)。 我相信這與jQuery函數中的if語句有關。
這是jQuery部分:
jQuery.fn.portfolio_addon = function(addon_options) {
"use strict";
//Set Variables
var addon_el = jQuery(this),
addon_base = this,
img_count = addon_options.items.length,
img_per_load = addon_options.load_count,
$newEls = '',
loaded_object = '',
$container = jQuery('.image-grid');
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$newEls = '';
loaded_object = '';
var loaded_images = $container.find('.added').size();
if ((img_count - loaded_images) > img_per_load) {
var now_load = img_per_load;
} else {
var now_load = img_count - loaded_images;
}
if ((loaded_images + now_load) == img_count) jQuery(this).fadeOut();
if (loaded_images < 1) {
var i_start = 1;
} else {
var i_start = loaded_images+1;
}
if (now_load > 0) {
// load more elements
for (var i = i_start-1; i < i_start+now_load-1; i++) {
loaded_object = loaded_object + '<div data-category="'+ addon_options.items[i].category +' " class="blogpost_preview_fw element '+ addon_options.items[i].category +'"><div class="fw_preview_wrapper"><div class="gallery_item_wrapper"><a href="'+ addon_options.items[i].url +'" ><img src="'+ addon_options.items[i].src +'" alt="" class="fw_featured_image" width="540"><div class="gallery_fadder"></div><span class="third_party_'+addon_options.items[i].thirdparty +'"></span><span class="third_party_mobile_'+addon_options.items[i].thirdparty_mobile +'"></span><span class="description_tag"><span class="actual_description">'+ addon_options.items[i].title +'</span></span> <span class="price_tag"><span class="actual_price">€ '+ addon_options.items[i].price +'</a></div><a href="'+ addon_options.items[i].url +'"><div class="grid-port-cont"><h6>'+ addon_options.items[i].title +'</h6><hr class="trennlinie"><span>'+ addon_options.items[i].description +'</span><hr class="trennlinie"><span>Preis: EUR '+ addon_options.items[i].price +'</span> · <span>Ort: '+ addon_options.items[i].postcode +' '+ addon_options.items[i].city +'</span></div></a></div></div></div></div>';
}
$newEls = jQuery(loaded_object);
$container.isotope('insert', $newEls, function() {
$container.isotope('reLayout');
});
}}
});
}
這是我的php的一部分:
<?php // load more on default
if($condition == true){
//connect to the database
//-select the database to use
$start1 = 40; // it starts at 40 because 40 items load when page loads
$limit1 = 20;
//-query the database table
$sql="SELECT * FROM table WHERE City LIKE '%".$featured."%' order by id limit $start1,$limit1";
//-run the query against the mysql query function
//-create while loop and loop through result set
//-assign &numrows variable
?>
<script>
items_set = [
{src : '<?php echo $row['imageURL']; ?>',
url : '<?php echo $row['URL']; ?>',
category: '<?php echo $row['DetailCategory']; ?>',
title : '<?php echo $row['Name']; ?>',
description : '<?php echo $row['Description']; ?>',
price : '<?php echo $row['Price']; ?>',
postcode : '<?php echo $row['Postcode']; ?>',
city : '<?php echo $row['City']; ?>',
thirdparty : '<?php echo $row['ThirdParty']; ?>',
thirdparty_mobile : '<?php echo $row['Thirdparty']; ?>'}
];
jQuery('#list').portfolio_addon({
load_count : <?php echo $numrows;?>,
items : items_set
});
</script>
<?php
}}
?>
這是我的第二個問題:我的數據庫中正好有49個項目(行)。 如代碼所示,頁面加載時已經顯示了40個。 現在,當我向下滾動頁面(觸發加載功能)時,僅顯示6個新項目,而應顯示9個(應使用我正在使用的查詢調用所有49個項目)。 不知何故,似乎mysql-query甚至根本沒有任何作用。
我真的很感謝您的幫助! 謝謝。
我希望我做對了:
一遍又一遍地加載相同的內容。
我認為這個問題是由於:
loaded_object = loaded_object + 'lots of more content';
在你的循環中。 您加載的對象每次都會附加到新內容的前面,然后附加到dom
您只想要您的:
loaded_object = 'lots of more content';
可以被加載..舊的東西已經在您的DOM中了,並且不需要成為“ loaded_object”的一部分
編輯:由於MarcB在您的問題下方未發表評論:您的select語句也一次又一次地獲取相同的數據
我認為,沒有ajax請求。 您需要發送一個ajax請求,該請求的偏移量為完成了多少帖子以及需要提取多少帖子。
請發表您的評論
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.