CMS DataLife Engine - Система управления сайтами

redissx

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

Рекомендуемые сообщения

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

 

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


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

1512035499_firefox_screenshot_2017-11-30

 

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]
Изменено пользователем redissx
  • Нравится 3
  • Поддерживаю 3
  • Спасибо 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
4 часа назад, MSK сказал:

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
10 часов назад, LADYX сказал:

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 04.03.2018 в 11:23, MSK сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 часа назад, LADYX сказал:

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

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

 

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

 

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

 

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
9 часов назад, redissx сказал:

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

 

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

 

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

 

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
3 часа назад, SN74 сказал:

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 30.11.2017 в 13:30, redissx сказал:

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 часа назад, Spyhog сказал:

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
34 минуты назад, SN74 сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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'));

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
17 часов назад, skapunker сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 01.04.2018 в 18:36, skapunker сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 29.05.2018 в 20:25, Azerate сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти