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

Question

I m new to web designing I want help from u guys 我是网页设计的新手，我需要你们的帮助

I have to build a html page which loads the all profile details from the mysql DB server. 我必须建立一个html页面，该页面从mysql DB服务器加载所有配置文件详细信息。 but DB contains about 1000 persons profile details . 但是DB包含大约1000个人资料详细信息。 I need to display all that detail. 我需要显示所有这些细节。 im using php scripting as server side programing and I have the code for retrieve the records from DB and that php code will generate html page too but it loads all 1000 persons profile. 即时通讯使用php脚本作为服务器端编程，我有从数据库检索记录的代码，该php代码也将生成html页面，但它会加载所有1000个人资料。

but I want to load first 50 records and later onscrolling, load next 50 records so on in that same page as in facebook feeds page 但我想先加载50条记录，然后再滚动，再加载50条记录，以此类推，就像在Facebook feeds页面中一样

the php code is I used is 我用的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>

I just knows very basics of html, js, jquery ,css and php and also I gone through following Answer from that I cant able to do what I really required. 我只是非常了解html，js，jquery，css和php的基础知识，而且我从以下的答案中受益，我无法做到我真正需要的。

Lazy load from database as user scrolls down page (similiar to Twitter and Facebook) 用户向下滚动页面（类似于Twitter和Facebook）时，数据库的延迟加载

plz help me regards this plz plz.... im not a good programmer I just need this to my academic project.. pleas help :-) 请帮助我考虑这个请....我不是一个好的程序员，我只需要这个就可以用于我的学术项目..请帮助:-)

Answer 1

A quick Google for 'Lazy Load' and i found this jQuery Plugin. 一个快速搜索“懒加载”的Google，我找到了这个jQuery插件。

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

Simply download and upload the package (aswell as jQuery) to your server. 只需将包（以及jQuery）下载并上传到您的服务器即可。

Add the following to your <head> section: 将以下内容添加到您的<head>部分：

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

Give your images a class such as .lazy , this allows the Plugin to bind to the images: 给您的图像一个类，例如.lazy ，这允许插件绑定到图像：

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

The initialize the plugin using the following function: 使用以下函数初始化插件：

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

Answer 2

You need to use Ajax to load data from php instead of directly displaying it. 您需要使用Ajax从php加载数据，而不是直接显示它。 You ajax request should send number of rows to load each time, to your php page which will then return those many requests in some format preferably JSON. 您的ajax请求应将每次加载的行数发送到您的php页面，该页面随后将以某种格式（最好是JSON）返回许多请求。 Then when ajax receives that response parse json and load content in "div" element. 然后，当ajax收到该响应时，将解析json并将内容加载到“ div”元素中。 Thats the basic structure. 那就是基本结构。 Now to load data dynamically you can use jQuery's scroll() function to determine when the last element is reached. 现在要动态加载数据，您可以使用jQuery的scroll()函数来确定何时到达最后一个元素。 Then your ajax function is called in which request next set of rows. 然后调用您的ajax函数，在其中请求下一组行。 Since you are new, I recommend reading the following: 由于您是新手，因此建议阅读以下内容：

jQuery Offset turotial jQuery偏移量
jQuery Scroll Top jQuery滚动顶部
jQuery Scroll jQuery滚动

They will help. 他们会帮助。 Good Luck :) 祝好运：）

如何使用客户端浏览器滚动加载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