Как загрузить определенное количество контента в социальную сеть, например на веб-страницу?

Я создаю веб-сайт в стиле социальных сетей и пытаюсь подражать нескольким пользователям одновременно, открывая несколько вкладок. Когда я открыл диспетчер задач, я заметил, что мой веб-сервер apache работает примерно на 20% ЦП после отладки и перемещения скриптов. Я обнаружил, что причина здесь.

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-запрос для использования from, где между scrollposition, scrollposition + maxload, orderby, desc.

Вот где я заблудился, я не уверен, как все это собрать воедино, или это даже логический способ сделать это.

LIMIT / Пагинация.
Script47 19.06.2018 11:27

Одновременно можно многому научиться, но некоторые предложения - это рассмотреть разделение проблем, например, с помощью варианта MVC. Используйте подготовленные операторы с параметрами привязки. И что касается фактического вопроса, кажется, что вам нужна непрерывная прокрутка, где загружаются следующие n сообщений, когда вы прокручиваете до конца

rypskar 19.06.2018 11:32

В дополнение к rypskar существует множество библиотек с непрерывной прокруткой, то есть sitepoint.com/jquery-infinite-scrolling-demos в качестве отправной точки.

user2417483 19.06.2018 11:36

@ Script47 Спасибо, я собирался использовать BETWEEN, но так как для правильной работы потребуется что-то вроде автоматического увеличения значения, я думаю, что могу использовать LIMIT X OFFSET Y вместо этого. @ rypskar Мне действительно нужно потратить немного больше времени на структуру сайта. @jeff Я просмотрел много скролл-демок, спасибо за ссылку.

insomniac 20.06.2018 18:06
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
43
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас есть хорошее представление о позиции прокрутки. Это то, что использует почти любой социальный сайт. Теперь, чтобы вы сделали что-то подобное, вам понадобится это

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

Каждый раз, когда вы загружаете больше результатов, вам нужно считать их страницей, а в PHP-скрипте вы заставляете их работать так же, как разбиение на страницы.

Спасибо, эта функция прокрутки действительно кажется корнем решения, и я думаю, что отсюда я справился с ней.

insomniac 20.06.2018 18:13

Другие вопросы по теме