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

Question

我是网页设计的新手，我需要你们的帮助

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

但我想先加载50条记录，然后再滚动，再加载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）时，数据库的延迟加载

请帮助我考虑这个请....我不是一个好的程序员，我只需要这个就可以用于我的学术项目..请帮助:-)

Answer 1

一个快速搜索“懒加载”的Google，我找到了这个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();
});

Answer 2

您需要使用Ajax从php加载数据，而不是直接显示它。 您的ajax请求应将每次加载的行数发送到您的php页面，该页面随后将以某种格式（最好是JSON）返回许多请求。 然后，当ajax收到该响应时，将解析json并将内容加载到“ div”元素中。 那就是基本结构。 现在要动态加载数据，您可以使用jQuery的scroll()函数来确定何时到达最后一个元素。 然后调用您的ajax函数，在其中请求下一组行。 由于您是新手，因此建议阅读以下内容：

jQuery偏移量
jQuery滚动顶部
jQuery滚动

他们会帮助。 祝好运：）

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

问题描述

2 个解决方案

解决方案1
0 2014-05-20 03:22:39

解决方案2
-1 2014-05-20 03:38:30

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

问题描述

2 个解决方案

解决方案1 0 2014-05-20 03:22:39

解决方案2 -1 2014-05-20 03:38:30

解决方案1
0 2014-05-20 03:22:39

解决方案2
-1 2014-05-20 03:38:30