javascript - 如何在滚动上实现jquery加载
问题描述
我有一个页面，其中我正在获取用户所有朋友的帖子，现在我只想先获取 15 个帖子，然后再添加一个加载更多按钮，然后再加载 15 个帖子我应该怎么做。
这是我的代码
$query = "SELECT ph.likes, ph.image_url,ph.email,ph.username,ph.uid ,ph.id
FROM photos as ph
inner join followers as fol
on fol.user_id = ph.uid
where fol.uid = '$id'
ORDER BY ph.image_url DESC ";
$fire = mysqli_query($con,$query) or die("can not fetch data from database ".mysqli_error($con));
if (mysqli_num_rows($fire)>0) {
while ($users = mysqli_fetch_assoc($fire)) {
$likes = $users['likes'];
$username = $users['username'];
$uid = $users['uid'];
$pixid = $users['id'];
}
}
?>
<?php
$query = "SELECT ph.ext, ph.likes,ph.desccription, ph.image_url,ph.email,ph.username,ph.uid ,ph.id,ph.avatar_path
FROM photos as ph
inner join followers as fol
on fol.user_id = ph.uid
where fol.uid = '$id'
ORDER BY ph.image_url DESC ";
$fire = mysqli_query($con,$query) or die("can not fetch data from database ".mysqli_error($con));
if (mysqli_num_rows($fire)>0) {
while ($users = mysqli_fetch_assoc($fire)) {
$likes = $users['likes'];
$description = $users['desccription'];
$username = $users['username'];
$uid = $users['uid'];
$pixid = $users['id'];
$avatar_path5 = $users['avatar_path'];
?>
<div class="all" >
<div class="card" >
<div class="float" >
<div class="avatar" >
<img src="<?php echo $avatar_path5; ?>" width="100%" class="avatar">
</div>
<div class="username" style="font-weight: 600; size: 14px; text-decoration: none; color: black !important; ">
<p style="color: black !important;"><?php echo "<div><a href='users?id=".$users['uid']."' style='color: black !important; '>
<h3>".$users['username']."</h3>
</div></a>"; ?></p>
</div>
</div>
<?php
if ($users['ext']=='mp4') {
?>
<video class="videos" controlsList="nofullscreen nodownload" style="width: 100%; height:100%;" controls autoplay="true" muted>
<source src="<?php echo $users['image_url']?>" type="video/mp4">
</video>
<?php
}else{
?>
<img src="<?php echo $users['image_url']?>" alt="Avatar" style="width:100%;">
<?php }
?>
<div class="container">
<h4><b><?php echo "<div><a href='users?id=".$users['uid']."'>
</div></a>";?></b></h4>
</div>
<div style="padding: 2px; margin-top: 5px;">
<?php
if (isset($_POST['liked'])) {
$postid = $_POST['postid'];
$result = mysqli_query($con, "SELECT * FROM photos WHERE id=$postid")or die(mysqli_error($con));
$row = mysqli_fetch_array($result)
or die(mysqli_error($con));
$n = $row['likes'];
mysqli_query($con, "INSERT INTO likes (user_id,username, post_id,avatar_path) VALUES ($id, '$fullname', $postid,'$activeavatar')")or die(mysqli_error($con));
mysqli_query($con, "UPDATE photos SET likes=$n+1 WHERE id=$postid")or die(mysqli_error($con));
echo $n+1;
exit();
}
if (isset($_POST['unliked'])) {
$postid = $_POST['postid'];
$result = mysqli_query($con, "SELECT * FROM photos WHERE id=$postid")or die(mysqli_error($con));
$row = mysqli_fetch_array($result)or die(mysqli_error($con));
$n = $row['likes'];
mysqli_query($con, "DELETE FROM likes WHERE post_id=$postid AND user_id=$id")or die(mysqli_error($con));
mysqli_query($con, "UPDATE photos SET likes=$n-1 WHERE id=$postid")or die(mysqli_error($con));
echo $n-1;
exit();
}
?>
</div>
<script type="text/javascript">
$('video').each(function(){
if ($(this).is(":in-viewport")) {
$(this)[0].play();
} else {
$(this)[0].pause();
}
})
</script>
<div>
<?php
// determine if user has already liked this post
$results = mysqli_query($con, "SELECT * FROM likes WHERE user_id=$id AND post_id=".$users['id']."")or die(mysqli_error($con));
if (mysqli_num_rows($results) == 1 ): ?>
<!-- user already likes post -->
<span class="unlike fas fa-heart " data-id="<?php echo $users['id']; ?>"></span>
<span class="like hide far fa-heart" onclick="PlaySound()" data-id="<?php echo $users['id']; ?>"></span>
<?php else: ?>
<!-- user has not yet liked post -->
<span class="like far fa-heart" onclick="PlaySound()" data-id="<?php echo $users['id']; ?>"></span>
<span class="unlike hide fas fa-heart " data-id="<?php echo $users['id']; ?>"></span>
<?php endif ?>
<a class="com" style="color: #929292 !important; " href="show?post_id=<?php echo $users['id'];?>" style=""> <span class="glyphicon glyphicon-comment trigger" ></span>comments</a>
<div class="wink" style=" color: black;
width: 30px;
height: 30px;
margin-top: -20px;
margin-left: 209px;
" > <?php
?></div>
<div class="float2">
<div class="react2" id="react2" data-rowid="<?php echo $pixid?>"><?php
$query2 = "SELECT * FROM gormint where post_id = $pixid and user_id= $id3";
$fire2 = mysqli_query($con,$query2) or die("can not fetch data from database ".mysqli_error($con));
$query3 = "SELECT * FROM bhai where post_id = $pixid and user_id= $id3";
$fire3 = mysqli_query($con,$query3) or die("can not fetch data from database ".mysqli_error($con));
$query4 = "SELECT * FROM famer where post_id = $pixid and user_id= $id3";
$fire4 = mysqli_query($con,$query4) or die("can not fetch data from database ".mysqli_error($con));
$query5 = "SELECT * FROM muskan where post_id = $pixid and user_id= $id3";
$fire5 = mysqli_query($con,$query5) or die("can not fetch data from database ".mysqli_error($con));
if (mysqli_num_rows($fire2)>0) {
echo "<img src='gormint.jpg' class='gormint2' style='width:30px; height:30px;' >";
}elseif (mysqli_num_rows($fire3)>0) {
echo "<img src='bhai.jpg' class='bhai2' style='width:30px; height:30px;'>";
}elseif (mysqli_num_rows($fire4)>0) {
echo "<img src='famer.jpg' class='bhai2' style='width:30px; height:30px;'>";
}elseif (mysqli_num_rows($fire5)>0) {
echo "<img src='bancho.jpg' class='bhai2' style='width:30px; height:30px;'>";
} else{
echo "<img src='wink.png' class='wink2' style='width:30px; height:30px;'>";
}?>
</div>
<div class="flipClass" style="display: flex;" data-rowid="<?php echo $pixid?>" id="flip">react</div>
<div class="panelClass" style="" id="panel" data-rowid="<?php echo $pixid?>">
<input type="image" onclick="PlaySound2()" id="display" data-value="<?php echo $users['id'];?>" src="gormint2.jpg" class="close2 display gormint animated bounceIn " >
<input type="image" onclick="PlaySound3()" data-value="<?php echo $users['id'];?>" data-rowid="<?php echo $pixid?>" id="display2" src="bhai.jpg" class="close2 display2 bhai animated bounceIn">
<input type="image" data-rowid="<?php echo $pixid?>" onclick="PlaySound4()" data-value="<?php echo $users['id'];?>" id="display3" src="famer.jpg" class="close2 display3 bhai animated bounceIn">
<input type="image" onclick="PlaySound5()" data-value="<?php echo $users['id'];?>" id="display4" src="bancho.jpg" class="close2 display4 bhai animated bounceIn">
</div>
</div>
<div class="count2 ">
<span id="count" style="margin-top: -5%;" class="likes_count"><?php echo $users['likes']; ?> likes</span><?php
if ($description=='') {
echo "";
}else{ echo '<p style="margin-bottom: 5%" class="written"> <b>'.$users["username"].'</b> '.$description;'</p>';
}
?>
</div>
<form method="POST" action="" >
<div class="commentdiv">
<input type="hidden" name="id" id="id" class="id" value="<?php echo $pixid;?>">
<input type="hidden" name="username" id="username" value="<?php echo $activeusername;?>">
<input type="hidden" name="uid" id="uid" value="<?php echo $id3;?>">
<textarea style="" name="comment" id="comment" class="comment" placeholder=" comment here"></textarea>
<button type="button" style="background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
color: #3897f0; font-weight:600;" class="submit" id="button_id">comment</button>
</div>
</form>
</div>
<div id="comments">
<?php
$sql = "SELECT * FROM comment where post_id='$pixid' limit 3";
$results = mysqli_query($con,$sql);
if (mysqli_num_rows($results)>0) {
while ($row = mysqli_fetch_assoc($results)) {
$commentid = $row['id'];
$comment = $row['comment'];
$string = covertHashtags($comment);
echo "<p class='written'>";
echo "<a href='users2?id=".$row['user_id']."' style='color:black !important;'><b>".$row['username']."</b></a>";
echo " ".$string;
$sql3 = "SELECT * FROM comment where id ='$commentid' and user_id='$id' order by comment desc limit 5 ";
$results3 = mysqli_query($con,$sql3);
if (mysqli_num_rows($results3)>0) {
echo "<div class='dropdown'>
<img src='ellipsis.png' class='dots'>
<div class='dropdown-content'>
<br><p class='delete' data-delete=".$commentid.">delete</p>
</div>
</div>";
}
else{
echo "";
}
echo "</p>";
}
}else{
echo "";
}
?>
</div>
</div>
<br><br>
<?php } ?>
现在我应该怎么做才能在前 15 个帖子之后添加一个加载更多按钮，当用户单击该按钮时，我想加载更多 15 个帖子，还有一个问题，每当用户单击时，我通过 j 查询设置了刷新功能在喜欢按钮或评论页面刷新所以这会导致任何问题吗？
解决方案
推荐阅读
- python - （python）如何在包含整数的列表中找到连续数字集
- swift - 检查 collectionViewCell 是否在 collectionView 上显示超过 50%
- docker - 如何在 Dockerfile 本身中设置断点？
- java - 我的自定义异常没有被抛出，而是 ArrayOutOfBoundsException 被抛出（JunitTest 错误）
- apache-spark - 如果内存无法保存数据，广播 DataFrame 是否会将数据溢出到磁盘？
- r - 通过根据另一行中另一列的值向数据框中添加列来匹配数据
- winapi - DirectX Resize 在边缘显示 win32 背景
- windows - powershell 脚本中的一般故障错误
- c# - 带有 wpf MVVM 的无线电检查功能
- python - 即使键不同，按时间顺序排列的 Python 顺序字典