페이지를 스크롤하는 동안 페이지에 값을로드하는 방법

아난 단 수 룰리

MySql 데이터베이스에 3k 이상의 행이있는 "User"라는 테이블이 있습니다. 페이지를 스크롤하는 동안 데이터베이스를 가져오고 싶습니다 (Facebook 뉴스 피드처럼). 오랫동안 서핑을했는데 못해요. 가능한 한 빨리 긍정적 인 반응을 기대합니다.

감사합니다!

Ivanfromer

무슨 뜻인지 이해했다면 :

데이터베이스 테이블

CREATE TABLE messages(
mes_id INT PRIMARY KEY AUTO_INCREMENT,
msg TEXT);

load_data.php

웹 페이지를 아래로 스크롤 할 때 script ($ (window) .scroll)은 사용자가 at the bottom and calls the last_msg_funtion(). Take a look at $.post("") eg: $.post("load_data.php?action=get&last_msg_id=35")

<?php
include('config.php');
$last_msg_id=$_GET['last_msg_id'];
$action=$_GET['action'];

if($action <> "get")
{
?>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
function last_msg_funtion() 
{ 
var ID=$(".message_box:last").attr("id");
$('div#last_msg_loader').html('<img src="bigLoader.gif">');
$.post("load_data.php?action=get&last_msg_id="+ID,

function(data){
if (data != "") {
$(".message_box:last").after(data); 
}
$('div#last_msg_loader').empty();
});
}; 

$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
last_msg_funtion();
}
}); 
});
</script>
</head>
<body>
<?php 
include('load_first.php'); //Include load_first.php 
?>
<div id="last_msg_loader"></div>
</body>
</html>
<?php
}

else
{
include('load_second.php'); //include load_second.php
}
?>

load_first.php 메시지 테이블에서 20 개의 행을로드하는 PHP 코드가 포함되어 있습니다.

<?php
$sql=mysql_query("SELECT * FROM messages ORDER BY mes_id DESC LIMIT 20");
while($row=mysql_fetch_array($sql))
{
$msgID= $row['mes_id'];
$msg= $row['msg'];
?>
<div id="<?php echo $msgID; ?>" class="message_box" > 
<?php echo $msg; ?>
</div> 
<?php
} 
?>

load_second.php 메시지 테이블에서 last_msg_id보다 적은 5 개의 행을로드하는 PHP 코드를 포함합니다.

<?php
$last_msg_id=$_GET['last_msg_id'];
$sql=mysql_query("SELECT * FROM messages WHERE mes_id < '$last_msg_id' ORDER BY mes_id DESC LIMIT 5");
$last_msg_id="";
while($row=mysql_fetch_array($sql))
{
$msgID= $row['mes_id'];
$msg= $row['msg']; 
?>
<div id="<?php echo $msgID; ?>" class="message_box" > 
<?php echo $msg; 
?>
</div>
<?php
} 
?>

CSS

body
{
font-family:'Georgia',Times New Roman, Times, serif;
font-size:18px;
}
.message_box
{
height:60px;
width:600px; 
border:dashed 1px #48B1D9; 
padding:5px ;
}
#last_msg_loader
{
text-align: right;
width: 920px;
margin: -125px auto 0 auto;
}
.number
{
float:right; 
background-color:#48B1D9; 
color:#000; 
font-weight:bold;
}

라이브 데모를 보고 아래로 스크롤하십시오.

감사합니다, Ivan

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

jquery로 스크롤하는 동안 페이드 인하는 방법

분류에서Dev

extjs에서 페이지 스크롤에 레코드를 자동로드하는 방법

분류에서Dev

링크에서 페이지를 클릭 한 경우 자동으로 스크롤하는 방법

분류에서Dev

웹 페이지를 스크롤하는 동안 URL 변경

분류에서Dev

안드로이드에서 이미지 버튼을 페이스 북 페이지에 연결하는 방법

분류에서Dev

사용자가 웹 페이지를 계속 스크롤하는 동안 내 div 배경을 점점 덜 투명하게 만드는 방법이 있습니까?

분류에서Dev

크롬을 탐색하는 동안 미국 버전의 웹 페이지를로드하는 방법

분류에서Dev

앵커 태그 표시 및 숨기기를 사용하는 동안 페이지 스크롤을 방지하는 방법은 무엇입니까?

분류에서Dev

다음 페이지로 이동할 때 jqgrid를 맨 위로 스크롤하는 방법은 무엇입니까?

분류에서Dev

php mysqli javascript를 사용하여 페이지를 스크롤하는 동안 데이터를 가져오고 표시하는 방법

분류에서Dev

PHP에서 페이지 사이를 이동하는 방법

분류에서Dev

AngularJS로 페이지 아래로 스크롤하는 동안 데이터로드

분류에서Dev

페이지 컨트롤과 결합 된 스크롤보기에서 이미지를 자동 레이아웃하는 방법이 있습니까?

분류에서Dev

안드로이드에서 뷰 페이저를 사용하여 이미지 파일 이름을 얻는 방법

분류에서Dev

안드로이드에서 뷰 페이저를 사용하여 이미지 파일 이름을 얻는 방법

분류에서Dev

무한 스크롤을 사용하는 동적 페이지의 전체 콘텐츠를로드하고 구문 분석하는 방법

분류에서Dev

페이지를 스크롤하는 동안 버튼을 계속 표시

분류에서Dev

자동 스크롤 기능 / 역 페이지 스크롤을 전환하는 방법은 무엇입니까?

분류에서Dev

WP로 페이지를로드하는 동안 외부 정적 리소스를 차단하는 방법

분류에서Dev

페이지 콘텐츠를 스크롤하는 동안 고정 헤더를 오버레이하는 방법은 무엇입니까?

분류에서Dev

페이지가로드되는 동안로드중인 GIF 이미지를 표시하는 방법

분류에서Dev

페이지 너비가 증가함에 따라 자동으로 가로로 스크롤하는 방법

분류에서Dev

이전 페이지를 이동하고 필드에 값을 표시하는 방법은 무엇입니까?

분류에서Dev

DB에서 레코드를 검색하는 동안 페이지의 일부를 업데이트하는 방법

분류에서Dev

Sails Express Node JS에서 요청 된 페이지가로드되는 동안 광고를 표시하는 방법

분류에서Dev

무한 스크롤 웹 페이지를 다운로드하는 방법

분류에서Dev

Corel에서 페이지 크기를 조정하는 동안 앵커를 설정하는 방법

분류에서Dev

페이지로드 중 페이지 스크롤보기를 숨기는 방법

분류에서Dev

사용자가 링크를 클릭 할 때 다른 페이지로 이동하기 전에 맨 위로 스크롤하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    jquery로 스크롤하는 동안 페이드 인하는 방법

  2. 2

    extjs에서 페이지 스크롤에 레코드를 자동로드하는 방법

  3. 3

    링크에서 페이지를 클릭 한 경우 자동으로 스크롤하는 방법

  4. 4

    웹 페이지를 스크롤하는 동안 URL 변경

  5. 5

    안드로이드에서 이미지 버튼을 페이스 북 페이지에 연결하는 방법

  6. 6

    사용자가 웹 페이지를 계속 스크롤하는 동안 내 div 배경을 점점 덜 투명하게 만드는 방법이 있습니까?

  7. 7

    크롬을 탐색하는 동안 미국 버전의 웹 페이지를로드하는 방법

  8. 8

    앵커 태그 표시 및 숨기기를 사용하는 동안 페이지 스크롤을 방지하는 방법은 무엇입니까?

  9. 9

    다음 페이지로 이동할 때 jqgrid를 맨 위로 스크롤하는 방법은 무엇입니까?

  10. 10

    php mysqli javascript를 사용하여 페이지를 스크롤하는 동안 데이터를 가져오고 표시하는 방법

  11. 11

    PHP에서 페이지 사이를 이동하는 방법

  12. 12

    AngularJS로 페이지 아래로 스크롤하는 동안 데이터로드

  13. 13

    페이지 컨트롤과 결합 된 스크롤보기에서 이미지를 자동 레이아웃하는 방법이 있습니까?

  14. 14

    안드로이드에서 뷰 페이저를 사용하여 이미지 파일 이름을 얻는 방법

  15. 15

    안드로이드에서 뷰 페이저를 사용하여 이미지 파일 이름을 얻는 방법

  16. 16

    무한 스크롤을 사용하는 동적 페이지의 전체 콘텐츠를로드하고 구문 분석하는 방법

  17. 17

    페이지를 스크롤하는 동안 버튼을 계속 표시

  18. 18

    자동 스크롤 기능 / 역 페이지 스크롤을 전환하는 방법은 무엇입니까?

  19. 19

    WP로 페이지를로드하는 동안 외부 정적 리소스를 차단하는 방법

  20. 20

    페이지 콘텐츠를 스크롤하는 동안 고정 헤더를 오버레이하는 방법은 무엇입니까?

  21. 21

    페이지가로드되는 동안로드중인 GIF 이미지를 표시하는 방법

  22. 22

    페이지 너비가 증가함에 따라 자동으로 가로로 스크롤하는 방법

  23. 23

    이전 페이지를 이동하고 필드에 값을 표시하는 방법은 무엇입니까?

  24. 24

    DB에서 레코드를 검색하는 동안 페이지의 일부를 업데이트하는 방법

  25. 25

    Sails Express Node JS에서 요청 된 페이지가로드되는 동안 광고를 표시하는 방법

  26. 26

    무한 스크롤 웹 페이지를 다운로드하는 방법

  27. 27

    Corel에서 페이지 크기를 조정하는 동안 앵커를 설정하는 방법

  28. 28

    페이지로드 중 페이지 스크롤보기를 숨기는 방법

  29. 29

    사용자가 링크를 클릭 할 때 다른 페이지로 이동하기 전에 맨 위로 스크롤하는 방법은 무엇입니까?

뜨겁다태그

보관