如何使用客户端浏览器滚动加载HTML内容，就像在facebook主页一样

how to use client browser scrolling to load the html contents as did in facebook home page?

本文关键字：主页 facebook 一样 浏览器 客户端 何使用 滚动 加载 内容 HTML      更新时间：2023-09-26

我是网页设计新手，希望得到大家的帮助

我必须建立一个html页面，从mysql数据库服务器加载所有配置文件的详细信息。但是DB包含大约1000个人的详细资料。我需要显示所有的细节。我使用php脚本作为服务器端编程，我有从数据库检索记录的代码，php代码也会生成html页面，但它加载所有1000人的配置文件。

但是我想加载前50条记录然后onscrolling，加载后50条记录等等在同一个页面中就像facebook feeds页面

我使用的php代码是

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <script src="jquery.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="container">
        <div class="img_container">
            <div class="row">
                <ul>
                <?php include 'connection.php';
                    $query= "select name, orgn, des ,email ,photo_path from profile_info ;";
                    $result=mysql_query($query);
                    while($row = mysql_fetch_array($result)){
                ?>
                    <li>
                        <a class="tooltip" href="#"><img src="<?php echo $row['photo_path']?>" alt="name"/>
                            <div>
                                <table>
                                    <tbody>
                                        <tr>
                                            <td>Name</td>
                                            <td>:</td>
                                            <td><?php echo $row['name']?></td>
                                        </tr>
                                        <tr>
                                            <td>Organisation</td>
                                            <td>:</td>
                                            <td><?php echo $row['orgn']?></td>
                                        </tr>
                                        <tr>
                                            <td>Designation</td>
                                            <td>:</td>
                                            <td><?php echo $row['des']?></td>
                                        </tr>
                                        <tr>
                                            <td>e-Mail</td>
                                            <td>:</td>
                                            <td><?php echo $row['email']?></td>
                                        </tr>
                                     </tbody>
                                </table> 
                            </div>  
                        </a>
                    </li>  
                    <?php } ?>  

                </ul> 
            </div>
        </div>

我只知道html, js, jquery,css和php的基础知识，我也经历了以下答案，我不能做我真正需要的。

当用户向下滚动页面时从数据库延迟加载(类似于Twitter和Facebook)

请帮助我关于这个plz plz....我不是一个好的程序员，我只是需要这个我的学术项目。请帮忙:-)

快速搜索'Lazy Load'，我发现了这个jQuery插件。

http://www.appelsiini.net/projects/lazyload

下载并上传包(以及jQuery)到您的服务器。

将以下内容添加到<head>部分:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

给你的图像一个类，如.lazy，这允许插件绑定到图像:

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

使用以下函数初始化插件:

$(function() {
    $("img.lazy").lazyload();
});

您需要使用Ajax从php加载数据，而不是直接显示它。您的ajax请求应该发送的行数，每次加载到您的php页面，然后将返回一些格式的许多请求，最好是JSON。然后，当ajax接收到响应时，解析json并加载"div"元素中的内容。这是基本结构。现在要动态加载数据，可以使用jQuery的scroll()函数来确定到达最后一个元素的时间。然后调用ajax函数，在其中请求下一组行。既然你是新人，我建议你阅读以下内容:

jQuery Offset
jQuery滚动页顶部
jQuery滚动

他们会帮忙的。祝你好运!

相关文章：