Ajax подгрузка новостей по кнопке или при скролле

[redissx 251]

Приветствую. Для ajax подгрузки новостей существует множество плагинов с кучей разных настроек. Но если вам требуется только подгрузка и ничего более, то предлагаю не грузить лишнего и воспользоваться этим небольшим решением.

 

Загрузка при клике по кнопке

В итоге мы получим это

 

1. В navigation.tpl вашего шаблона

<div class="bottom-nav ignore-select" id="bottom-nav">
	    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
    
    <!-- сюда можете вставить дополнительно обычную навигацию -->
    
</div>

2. В конец css файла вашего шаблона

.bottom-nav {clear: both; padding-top: 60px;}
.nav-load {text-align: center;}
.nav-load a {padding: 0 60px; display: inline-block; height: 60px; line-height: 60px; border-radius: 30px;
font-weight: 700; font-size: 18px; background-color: #2980b9; color: #fff;}
.nav-load a:hover {background-color: #00a652; color: #fff;}
.nav-load span {display: none;}

3. В конец js файла вашего шаблона

$(document).ready(function(){
    
         $('body').on('click','#nav-load a',function(){
        var urlNext = $(this).attr('href');
        var scrollNext = $(this).offset().top - 200;
        if (urlNext !== undefined) {
            $.ajax({
                url: urlNext,
                beforeSend: function() {
                    ShowLoading('');
                },            
                success: function(data) {
                    $('#bottom-nav').remove();
                    $('#dle-content').append($('#dle-content', data).html());
                    $('#dle-content').after($('#bottom-nav'));
                    window.history.pushState("", "", urlNext);
                    $('html, body').animate({scrollTop:scrollNext}, 800);    
                    HideLoading('');
                },
                  error: function() {                
                    HideLoading('');
                    alert('что-то пошло не так');
                  }
            });
        };
        return false;
    });
    
});

Автоматическая загрузка при скролле

В итоге по мере прокрутки к нижним новостям следующие новости будут автоматически загружаться.

 

1. В navigation.tpl вашего шаблона

<div class="bottom-nav ignore-select" id="bottom-nav">
	    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
    
</div>

2. В конец css файла вашего шаблона

.bottom-nav {clear: both; opacity:0;}

3. В конец js файла вашего шаблона

$(document).ready(function(){
    
    var loadLink = $('#nav-load'), loadStatus = 0;
    $(window).scroll (function () {
        if ($(this).scrollTop() + $(this).height() + 50 > loadLink.offset().top) {
            var urlNext = loadLink.find('a').attr('href');
            if (urlNext !== undefined && loadStatus == 0) {
                loadStatus = 1;
                $.ajax({
                    url: urlNext,
                    beforeSend: function() {
                        ShowLoading();
                    },            
                    success: function(data) {
                        $('#bottom-nav').remove();
                        $('#dle-content').append($('#dle-content', data).html()).after($('#bottom-nav'));
                        window.history.pushState("", "", urlNext);
                        HideLoading();
                        loadStatus = 0, loadLink = $('#nav-load');
                    }
                });
            } else {
                loadLink.remove();
            };
        };
    });  
    
});

здесь в строке

        if ($(this).scrollTop() + $(this).height() + 50 > loadLink.offset().top) {

цифра 50 - это расстояние до нижнего края новостей при котором начинается загрузка. То есть вы можете немного заранее загружать, пока юзер не доскроллил до конца, меняя эту цифру. Например, 250 - новости будут загружаться раньше.

Также замечу, что рекомендуется использовать загрузку только на главной и в категории во избежание проблем. Обычно я делаю так в navigation.tpl

[aviable=main|cat]
<div class="bottom-nav ignore-select" id="bottom-nav">
	    <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
    
    <!-- сюда можете вставить дополнительно обычную навигацию -->
    
</div>
[/aviable]
	[not-aviable=main|cat]
<!-- обычная навигация -->
[/not-aviable]

Изменено 30 ноября 2017 пользователем redissx

[Cartmont 0]

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

Отличная реализация без правок родных файлов движка

[MSK 289]

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

[LADYX 90]

4 часа назад, MSK сказал:

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

Напишите реализацию, может быть кому и пригодится.

А в идеале реализовать бы такую возможность в DLE, с возможностью на выбор для каждой категории отдельно.

[SN74 5]

10 часов назад, LADYX сказал:

Напишите реализацию, может быть кому и пригодится.

А в идеале реализовать бы такую возможность в DLE, с возможностью на выбор для каждой категории отдельно.

Может быть redissx доработает, если его попросить.

[redissx 251]

В 04.03.2018 в 11:23, MSK сказал:

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

Здесь это учтено. Все так и работает.

[LADYX 90]

@redissx А если усложнить задачу? Например, ставим загрузку по 10 новостей (или сколько там в админке по умолчанию). Первые 3 по 10 загружаются автоматически, после чего появляется кнопка и в дальнейшем подгрузка уже только через кнопку? Плюс, когда полностью уже загружены все новости, уведомлять "новостей больше нет". И alert наверное лучше убрать, зачем нужны окна?

[redissx 251]

2 часа назад, LADYX сказал:

@redissx А если усложнить задачу? Например, ставим загрузку по 10 новостей (или сколько там в админке по умолчанию). Первые 3 по 10 загружаются автоматически, после чего появляется кнопка и в дальнейшем подгрузка уже только через кнопку? Плюс, когда полностью уже загружены все новости, уведомлять "новостей больше нет". И alert наверное лучше убрать, зачем нужны окна?

Надо не забывать, что это все через шаблон и чтобы показать 3 нужно все равно загрузить 10 и 7 скрыть временно, ну или 2 раза запрашивать, один раз 3, потом остальное. В общем, что-то избыточное, и я не особо понял саму идею и зачем это нужно. Мне это точно не нужно )

 

Уведомление - тоже не особо нужно, по-моему мнению. Оно того не стоит, чтобы обдумывать как его вывести, ведь на последней  странице и ссылки то  нет, по которой кликать.

 

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

 

В целом, я не горю желанием что-то допиливать. Скрипт  решает свою задачу, не более. Нужны украшательства - есть продвинутые jquery плагины типа infinite scroll.

 

[SN74 5]

9 часов назад, redissx сказал:

Надо не забывать, что это все через шаблон и чтобы показать 3 нужно все равно загрузить 10 и 7 скрыть временно, ну или 2 раза запрашивать, один раз 3, потом остальное. В общем, что-то избыточное, и я не особо понял саму идею и зачем это нужно. Мне это точно не нужно )

 

Уведомление - тоже не особо нужно, по-моему мнению. Оно того не стоит, чтобы обдумывать как его вывести, ведь на последней  странице и ссылки то  нет, по которой кликать.

 

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

 

В целом, я не горю желанием что-то допиливать. Скрипт  решает свою задачу, не более. Нужны украшательства - есть продвинутые jquery плагины типа infinite scroll.

 

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

Изменено 6 марта 2018 пользователем SN74

[redissx 251]

3 часа назад, SN74 сказал:

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

Урл в адресной строке меняется.

window.history.pushState("", "", urlNext);

  это оно и есть.

[Spyhog 65]

В 30.11.2017 в 13:30, redissx сказал:

Приветствую. Для ajax подгрузки новостей существует множество плагинов с кучей разных настроек. Но если вам требуется только подгрузка и ничего более, то предлагаю не грузить лишнего и воспользоваться этим небольшим решением.

Можно, чтобы в полной новости контент подгружался? 

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

[SN74 5]

2 часа назад, Spyhog сказал:

Можно, чтобы в полной новости контент подгружался? 

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

Причём тут полная новость вообще?
Кто будет отдавать картинки?
Вкурсе что DLE штатно это не умеет, и только парсить целые страницы нужно будет?

[Spyhog 65]

34 минуты назад, SN74 сказал:

Причём тут полная новость вообще?
Кто будет отдавать картинки?
Вкурсе что DLE штатно это не умеет, и только парсить целые страницы нужно будет?

Да а каком парсере идёт речь вообще? Постепенная загрузка текста полной новости, если он большой, по мере прокручивания вниз. Вот что нужно.

[redissx 251]

11 часов назад, Spyhog сказал:

Можно, чтобы в полной новости контент подгружался? 

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

Навигация полной новости в splitnewsnavigation.tpl. Делайте по аналогии. Думаю, должно работать все нормально, но не проверял. Единственное, что нужно тут

                    $('#dle-content').append($('#dle-content', data).html());
                    $('#dle-content').after($('#bottom-nav'));

править, чтобы из ответа брал нужный кусок контента и вставлял в нужное место. Так  как #dle-content это весь фуллстори.тпл целиком, а не лишь сам текст.

Ну то есть, например так

                    $('.full-text').append($('.full-text', data).html());
                    $('.full-text').after($('#bottom-nav'));

 

[skapunker 64]

У меня с начала нормально загружает, а потом начинает по 3-5 страниц сразу грузить. 

[redissx 251]

17 часов назад, skapunker сказал:

У меня с начала нормально загружает, а потом начинает по 3-5 страниц сразу грузить. 

Все корректно работает. Проблема на вашей стороне.

[Azerate 0]

В 01.04.2018 в 18:36, skapunker сказал:

У меня с начала нормально загружает, а потом начинает по 3-5 страниц сразу грузить. 

Ещё актуально ? У тебя скрипт копируется всякий раз когда подгружаются странницы. Перенести скрипт из navigation.tpl под тег {content} или перед </body> и всё будет нормально.

[skapunker 64]

В 29.05.2018 в 20:25, Azerate сказал:

Ещё актуально ? У тебя скрипт копируется всякий раз когда подгружаются странницы. Перенести скрипт из navigation.tpl под тег {content} или перед </body> и всё будет нормально.

Действительно, в том и была загвоздка. Спасибо.

[sergey14 3]

Привет ребята, огромное спасибо redissx

Оставил старую навигацию, вдобавок кнопку запихнул "Загрузить еще". При нажатии, все подгружается но старая навигация остается на странице, как исправить?

Буду очень благодарен.

 

[Mek 99]

После установки этого хака и включении "Автоматическая загрузка при скролле" буквально чрез 5 минут сайт перестал открываться и вылезла ошибка "503 Service Temporarily Unavailable".

На протяжении часа сайт открывался через раз и постоянно была 503 ошибка. Вернул всё как было раньше - проблема ушла. Совпадение?

[redissx 251]

51 минуту назад, sergey14 сказал:

Привет ребята, огромное спасибо redissx

Оставил старую навигацию, вдобавок кнопку запихнул "Загрузить еще". При нажатии, все подгружается но старая навигация остается на странице, как исправить?

Буду очень благодарен.

 

Оберните все содержимое navigation.tpl в

<div id="bottom-nav"></div>

26 минут назад, Mek сказал:

После установки этого хака и включении "Автоматическая загрузка при скролле" буквально чрез 5 минут сайт перестал открываться и вылезла ошибка "503 Service Temporarily Unavailable".

На протяжении часа сайт открывался через раз и постоянно была 503 ошибка. Вернул всё как было раньше - проблема ушла. Совпадение?

Неизвестно. Что значит включили? В админке есть такое?

[sergey14 3]

35 минут назад, redissx сказал:

Оберните все содержимое navigation.tpl в

<div id="bottom-nav"></div>

Неизвестно. Что значит включили? В админке есть такое?

Да все отлично, заработало ураааа!!! Спасибо

Изменено 16 ноября 2018 пользователем sergey14

[Mek 99]

42 минуты назад, redissx сказал:

Что значит включили? В админке есть такое?

Нет, не в админке. Установил данных хак из первого сообщения с автоматической загрузкой при скроллинге.

 

[redissx 251]

1 час назад, Mek сказал:

Нет, не в админке. Установил данных хак из первого сообщения с автоматической загрузкой при скроллинге.

 

Не знаю. 503 - серверная ошибка, а в скрипте только ajax запрос взаимодействует с сервером. У меня ничего такого не наблюдалось, никто больше такого не писал, значит это что-то у вас.

Изменено 16 ноября 2018 пользователем redissx

[Shohxusrav 0]

Здравствуйте!

 

У вас отличный хак. Но есть вопрос. Если новости показывает в main.tpl с помощью тег {content} работает без проблем.

А я пользуюсь с тег {custom}. Потому что мне нужно выводить определенный новости с категориями. 

 

Мой вариант:

{custom category="5-6" template="shortstory" aviable="global" from="0" limit="20" order="date" navigation="yes"}

 

Как можно разобраться что хак работал тоже с {custom} тегам.

 

Спасибо!

Изменено 30 ноября 2018 пользователем Shohxusrav