무한 스크롤 PHP PHP jQuery

Question

아래 코드는 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');        
     });   
    }} 
}); 
} 

그리고 이것은 내 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가 전혀 효과가없는 것처럼 보인다.

정말 도움이됩니다. 감사.

Answer 1

내가 내가이 권리를 얻고 희망 :

같은 내용을 반복해서로드되고있다.

나는이 문제로 인해 생각 :

loaded_object = loaded_object + 'lots of more content'; 

을 루프에서. 귀하의로드 된 객체마다 새로운 콘텐츠의 뿅 붙어서 다음

당신은 원하는 DOM 당신에 부착되어

loaded_object = 'lots of more content'; 

오래된 물건 allready 당신의 DOM에 ..로드 할 및 질문 아래에 댓글을 달았습니다 MarcB 나이까으로 : 당신의 선택 문이 또한 다시 내가 생각

Answer 2

를 통해 동일한 데이터를 가져 오는하고, t 나던 필요성은 "loaded_object"

편집의 일부가 될 수 있습니다 여기 아약스 요청이 없습니다. 얼마나 많은 게시물이 완료되고 얼마나 많은 게시물을 가져올 지에 대한 오프셋과 함께 ajax 요청을 보내야합니다.

의견을주십시오.