jQuery와 PHP를 사용하여 infifnite 스크롤에 더 많이로드하십시오.

Question

최근 PHP와 jquery를 사용하여 더 많은 기능을로드했습니다. 내가 쿼리 다음 DB 연결 코드와 쓰기 result .php에서

<div class="container clearfix product-output"> 

</div> 

jQuery를

$.ajax({ 
    method: "POST", 
    url: "result.php", 
    data: { keyword:"all"} 
}).done(function(msg) { 
    $(".product-output").html(msg); 
    $(".load-more").on("click",function(){ 
     var load_num= $('.load-more').length; 
     var appear=[]; 
     $(".im-product-block").each(function(){ 
      appear.push($(this).attr('id')); 
     }); 
     $.ajax({ 
      method: "POST", 
      url: "result.php", 
      data: { keyword: "all", y_id: appear, load_num: load_num } 
     }).done(function(msg1){ 
      $('.load-more-div').before(msg1); 
      if($(".hide-load").val()==1){ 
       $(".load-more").hide(); 
      } 
     }); 

    }); 
}); 

HTML을 내 코드를 참조하십시오.

$query = 'SELECT * FROM `product` ORDER BY id DESC LIMIT 15'; 
$query_1 = 'SELECT * FROM `product` ORDER BY id DESC'; 

if (ISSET($_POST['y_id'])) { 
    $appear = implode("', '", $_POST['y_id']); 
    $query = "SELECT * FROM `product` WHERE id NOT IN('{$appear}') ORDER BY id DESC LIMIT 15"; 
    $query_1 = "SELECT * FROM `product` WHERE id NOT IN('{$appear}') ORDER BY id DESC"; 
} 
$result = $conn->query($query); 
$result_1 = $conn->query($query_1); 
$total_num = $result_1->num_rows; 
echo '<div class="container clearfix product-output">'; 

if ($result->num_rows > 0) { 

    while ($row = $result->fetch_assoc()) { ?> 

     <div class="col-sm-2 im-product-block" id="<?php echo $row["id"]; ?>"> 

      <p class="product-name"> <?php echo $row["name"]; ?></p></div> 

    <?php } 
    echo '</div>'; 

    if ($total_num > 15 && $_POST[load_num] == 0) { 
     echo '<div class="load-more-div"><p class="load-more"> Load More</p></div>'; 
    } 
    if ($total_num < 15) { 
     echo '<input type="hidden" name="hide-load" class="hide-load" value="1"> 
<div class="load-finished"><p class="load-f"> All Products Loaded Successfully</p></div>'; 
    } 

} 

여기이 모든 기능이 정상적으로 작동합니다. 그러나 더 많은로드 버튼을 클릭하는 대신 사용자가 스크롤하여로드 할 때까지 더 이상 클릭하지 않고 제품을 자동으로 가져와야합니다. 다음 코드

$(window).scroll(function() { 
    var hT = $(".load-more").offset().top, 
     hH = $(".load-more").outerHeight(), 
     wH = $(window).height(), 
     wS = $(this).scrollTop(); 
    if (wS > (hT+hH-wH)){ 
     $(".load-more").trigger("click"); 
    } 
}); 

그러나 여기서 실행을 사용하여 해당 난에 대한

가 중지되지 무한대 .IT에 contunied된다. 이 코드를 확인하고 좋은 방법을 제안하십시오.

Answer 1

아약스 호출이 만들어지고 페이지에 기록되는 동안로드 실행을 중단해야한다고 생각합니다. 아마도 부울 변수를 설정하여 더 많이로드해야하는지 결정하십시오.

예컨대

var canLoad = true; 

$(window).scroll(function() { 
    var hT = $(".load-more").offset().top, 
     hH = $(".load-more").outerHeight(), 
     wH = $(window).height(), 
     wS = $(this).scrollTop(); 
    if (wS > (hT+hH-wH) && canLoad){ 
     canLoad = false; 
     $(".load-more").trigger("click"); 
    } 
}); 

ajax 함수가 완료되고 데이터를로드 한 후에 canLoad을 true로 설정하십시오.