Блог

Я знаю, что есть плагины для ленивой загрузки изображений. У меня есть сайт с кодом купона, на моей странице категории для обуви в моей базе данных у меня есть 500 подходящих купонов. Я не хочу отображать все 500 по очевидным причинам. Я хочу сначала показать только 20, а затем, когда пользователь продолжает прокручивать страницу вниз, он загружает больше купонов. Как бы я это сделал?

РЕДАКТИРОВАТЬ: у меня работает вызов ajax. Вот код, который я использую:

 <script type="text/javascript">
        $(window).scroll(function(){
            if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
                $('div#loadmoreajaxloader').show();
                $.ajax({
                    url: "loadmore.php",
                    success: function(html){
                        if(html){
                            $("#postswrapper").append(html);
                            $('div#loadmoreajaxloader').hide();
                        }else{
                            $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                        }
                    }
                });
            }
        });
</script>
  

Проблема, с которой я столкнулся сейчас, заключается в том, как получать правильные строки из базы данных при каждой прокрутке?

При начальной загрузке страницы я делаю это:

 SELECT * FROM tblCoupons LIMIT 0,20
  

Как должен выглядеть вызов mysql в loadmore.php файл? Я думаю, мне нужно как-то увеличить счетчик …. хммм…

Это одна из функций в Интернете, которая, я надеюсь, исчезнет… но вот в чем дело-

При загрузке страницы вы получаете около 100 результатов или сколько угодно, а затем помещаете их в контейнер. При загрузке вы используете jquery для регистрации высоты области содержимого на вашем сайте. Установите начальный индекс, чтобы вы знали, что запрашивать (очевидно, отправляйте соответствующие данные страницы в вашем ajax-вызове), выберите размер экрана и дождитесь прокрутки. При прокрутке вы проверяете смещение вершины прокрутки плюс размер окна, чтобы увидеть, находится ли пользователь внизу страницы в пределах разумного порога — в данном случае с допуском около 100 пикселей. Выполните вызов ajax, а затем добавьте результаты.

 var screen_height = $('body').height();
var cur-y = $(window).scrollTop();
var screen = $(window).height();
var cur_index = 0;
  

Затем примените прослушиватель прокрутки к телу…

 $('body').scroll(function(){
    if($(window).scrollTop()   screen >= (screen_height - 100))
    {
      // make an ajax call to your server and fetch the next 100, then update
      //some vars
        $.ajax({
            url: "your_script.php",
            data: {cur_index:cur_index},
            success: function(){
                cur_index  = 1;
                screen_height = $('body').height();

               // append content to your container

            }
        });
    }
});
  

… в основном.
Это не предназначено для копирования / вставки. но больше похоже на общее руководство о том, как я делал это в прошлом. Вы также должны установить условия, чтобы это срабатывало только один раз для каждого предполагаемого события, поскольку .scroll () прослушивает любое движение прокрутки.

надеюсь, это каким-то образом поможет.