时间戳

首页 > 解决方案 > 如何在网页等社交媒体中加载特定数量的内容？

javascript - 如何在网页等社交媒体中加载特定数量的内容？

问题描述

我正在创建一个社交媒体风格的网站，并试图通过打开多个选项卡来同时模拟多个用户。当我打开任务管理器时，我注意到我的 apache web 服务器在调试和移动脚本后运行了大约 20% 的 cpu，我发现原因就在这里

var cnodelist1 = jQuery_3_3_1("#CheckInContainer").length;
function CheckTT()
{
   var cnodelist2 = jQuery_3_3_1("#CheckInContainer").length;
   if(cnodelist2 > cnodelist1)
   {

       var audio = jQuery_3_3_1("#mysoundclip")[0];
       audio.play();
       audio.volume = 0.1;
       cnodelist1 = cnodelist2;
   }
   //Problem is loading alot of content
   jQuery_3_3_1("#CheckInContainer").load(location.href+" #CheckInContainer>*","");

}
setInterval(CheckTT, 5000);

加载更新的帖子容器

<div id = "CheckInContainer">
    <?php 
    $sql2 = "SELECT author,post,date FROM mypage_posts ORDER BY date DESC";
    $con2 = DataBaseConnect();
    $result2 = mysqli_query($con2, $sql2);
    $message = '';
    $date = '';
    $allmsgs = "";

    if(!$result2)
    {
        $errors[] =  "* Error: " . $sql2 . "<br>" . mysqli_error($con2)."<br>";
    }
    else
    {
        while($row2 = mysqli_fetch_assoc($result2)) 
        {
            $message = isset($row2['post']) ? $row2['post'] : '';
            $date = isset($row2['date']) ? $row2['date'] : '';
            $auth = isset($row2['author']) ? $row2['author'] : 'Guest';

            $sql3 = "SELECT user_avatar FROM accounts WHERE user_displayname = '$auth'";
            $con3 = DataBaseConnect();
            $result3 = mysqli_query($con3, $sql3);
            $av = 'i/guest.png';

            while($row3 = mysqli_fetch_assoc($result3)) 
            {
                $av = isset($row3['user_avatar']) ? $row3['user_avatar'] : 'i/guest.png';
            }

            if(!empty($message))                 
            {
                $message = htmlspecialchars($message);
                $message = wordwrap(nl2br($message),208,"\n",true);
                $message = autolink($message, array("target"=>"_blank","rel"=>"nofollow"));
                $dont_send = false;
                $type = "<b>Global</b>";
                $en = '';

                if($message[0] == "@")
                {
                    $n = isset($_SESSION['user_name']) ? $_SESSION['user_name'] : '';
                    $l = strlen($n);

                    if(empty($n))
                    {
                        $dont_send = true;
                    }
                    else
                    {
                        for($i = 1;$i<$l;++$i)
                        {
                            if($message[$i] != $n[$i-1])
                            {
                                echo '$message[$i]';
                                $dont_send = true;
                                break;
                            }
                        }
                    }

                    if(!$dont_send)
                    {
                        $message = substr($message, $l+2);
                        $type = "<b>Private</b>";
                    }
                }

                if(!$dont_send && $_SESSION['entered'])
                {
                    $allmsgs.= '<pre id ="ptext"style = "text-align:left;position:relative;"><img src = "'.$av.'" style = "width:32px; height:32px; padding:16px;padding-left:0px;padding-bottom:0px;" alt="Avatar" /><span style = "position: absolute;top: 16px;left: 42px;"><b>'.$auth.'</b><br><i>'.time_elapsed_string($date,false).' '.$type.'</i></span><br><br><br>'.TextToEmotes(wordwrap(nl2br($message),69,"\n",true)).'</pre>
                    <div class="blank_bar" style = "width:100%;border: 1px solid #586167;"><a href="" style = "padding-right: 30px;">Rate</a><a href="">Reply</a></div><div name = "seperator" id = "seperator"></div>';
                }
            }                   
        }

        if(!empty($allmsgs))
        {
            echo $allmsgs;
        }
    }   
    ?>
</div>

问题是我在数据库中有超过 1000 个帖子，当然加载这么多内容是荒谬的，所以我的问题是如何管理加载所需的内容？我在想我必须跟踪垂直滚动位置并基于该位置加载内容，然后将我的 sql 查询更改为在滚动位置、滚动位置 + 最大负载、排序比、降序之间使用的位置。

这就是我迷路的地方，我不确定如何将所有这些拼凑在一起，或者这是否是解决这个问题的合乎逻辑的方式。

标签： javascriptphpjqueryhtmlmysqli

解决方案

您对滚动位置有一个好主意。这几乎是所有社交网站都使用的。现在为了让你做类似的东西，你需要这个

$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height()-$(window).height()){
        alert("We're at the bottom of the page!!");
        // Ajax request right here
    }
});

每次加载更多结果时，都需要将其计为一页，并在 PHP 脚本中使其像分页一样工作

推荐阅读