无限滚动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>&nbsp;·&nbsp;<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');                             
        });         
    }}
});
}

jQuery.fn.portfolio\u加载项=函数（加载项选项）{
“严格使用”；
//设置变量
var addon_el=jQuery（此），
addon_base=this，
img\u count=加载项\u选项.items.length，
img_per_load=加载选项。加载计数，
$newEls=''，
已加载的_对象=“”，
$container=jQuery（'.image grid'）；
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）+$（窗口）.height（）==$（文档）.height（））{
$newEls=''；
加载的_对象=“”；
var loaded_images=$container.find（'.added'）.size（）；
if（（img\u计数-加载的图像）>每个加载的img\u）{
var now_load=每_load的img_；
}否则{
var now_load=img_count-加载的图像；
}
if（（加载的图片+现在加载）=img\u计数）jQuery（this.fadeOut（）；
如果（加载的图像<1）{
var i_start=1；
}否则{
var i_start=加载的_图像+1；
}
如果（现在加载>0）{
//加载更多元素
对于（变量i=i_start-1；i

这是我的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查询似乎根本没有任何效果

---

我真的非常感谢你的帮助！谢谢。

我希望我做对了：

同样的内容被反复加载

我认为这个问题是由于：

loaded_object = loaded_object + 'lots of more content';

在你的循环中。 每次加载的对象都会在新内容前面附加自身，然后再附加到dom

您只想要您的：

loaded_object = 'lots of more content';

待加载。。旧的东西在DOM中已准备就绪，不需要成为“加载的\u对象”的一部分

编辑：

---

正如MarcB在下面的问题中所评论的那样：select语句也在一次又一次地获取相同的数据，我认为没有ajax请求。您需要发送一个ajax请求，其偏移量为完成多少篇文章以及需要获取多少篇文章

---

请给出您的评论

您直接将PHP中的数据转储到JS上下文中。您面临着引入JS语法错误并杀死整个JS代码块的巨大风险。永远不要直接倾倒。始终通过

json\u encode（）

输出，因此您可以始终生成语法正确的JS。它还可以无限重复，因为在两次提取调用之间您不会更改$start/$限制。您每次只是获取/显示相同的记录。您的滚动条必须发送“获取第40-49页”、“获取第50-59页”、“获取第60-69页”等信息。。。每个time@MarcB这看起来像是“初稿”。。。因此，他可能正在构建某种东西的原型，以了解如何使其工作；）@马尔克：谢谢！这肯定只是一个原型，这里什么都没有完成，但你是对的！我只是想知道如何只获取40-49页，这样在这些页面加载后，当滚动到底部时，就不会出现更多的新内容了……也许他是在请求index.php？featured='something'。。。加载图像并在每次页面加载时最多显示20个。在这种情况下，他不需要任何ajax，你能告诉我这个ajax请求的外观吗？谢谢谢谢仅删除“加载的_对象”并不能做到这一点，您是对的（@MarcB）。如果我只想加载这9个项目一次，没有更多的页面，你能告诉我它应该是什么样子吗？谢谢！也许可以重新考虑一下您的客户机和服务器策略。。。正如Rajesh在他的帖子中提到的，处理一些ajax请求可能是有用的。您应该考虑创建一个RESTful服务，然后与您的客户交谈