Я знаю, что есть плагины для ленивых загрузочных изображений. У меня есть сайт с кодом купона, на моей странице категории для обуви в моей БД. У меня есть 500 купонов, которые соответствуют. Я не хочу отображать все 500 по очевидным причинам. Сначала я хочу показать 20, а затем, когда пользователь продолжает прокручивать страницу, он загружает больше купонов. Как мне это сделать?
EDIT: У меня есть вызов 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), выберите размер экрана и дождитесь прокрутки. При прокрутке вы проверяете размер прокрутки и прокрутки scrollTop, чтобы увидеть, находится ли пользователь в нижней части страницы в пределах разумного порога – в этом случае около 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 () прослушивает любое перемещение прокрутки.
надеюсь, что это поможет в некотором роде.