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

[redissx 254]

Приветствую. Для 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 290]

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

[LADYX 91]

  04.03.2018 в 08:23, MSK сказал:

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

Расширить  

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

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

[SN74 5]

  04.03.2018 в 13:18, LADYX сказал:

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

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

Расширить  

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

[redissx 254]

  04.03.2018 в 08:23, MSK сказал:

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

Расширить  

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

[LADYX 91]

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

[redissx 254]

  05.03.2018 в 16:12, LADYX сказал:

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

Расширить  

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

 

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

 

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

 

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

 

[SN74 5]

  05.03.2018 в 18:35, redissx сказал:

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

 

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

 

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

 

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

 

Расширить  

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

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

[redissx 254]

  06.03.2018 в 04:19, SN74 сказал:

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

Расширить  

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

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

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

[Spyhog 65]

  30.11.2017 в 10:30, redissx сказал:

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

Расширить  

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

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

[SN74 5]

  30.03.2018 в 17:41, Spyhog сказал:

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

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

Расширить  

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

[Spyhog 65]

  30.03.2018 в 19:57, SN74 сказал:

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

Расширить  

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

[redissx 254]

  30.03.2018 в 17:41, 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 73]

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

[redissx 254]

  01.04.2018 в 12:36, skapunker сказал:

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

Расширить  

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

[Azerate 0]

  01.04.2018 в 12:36, skapunker сказал:

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

Расширить  

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

[skapunker 73]

  29.05.2018 в 17:25, Azerate сказал:

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

Расширить  

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

[sergey14 3]

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

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

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

 

[Mek 99]

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

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

[redissx 254]

  16.11.2018 в 09:25, sergey14 сказал:

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

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

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

 

Расширить  

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

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

  16.11.2018 в 09:51, Mek сказал:

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

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

Расширить  

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

[sergey14 3]

  16.11.2018 в 10:17, redissx сказал:

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

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

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

Расширить  

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

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

[Mek 99]

  16.11.2018 в 10:17, redissx сказал:

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

Расширить  

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

 

[redissx 254]

  16.11.2018 в 10:59, 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