Ajax загрузка новостей


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

Установка:
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]
 
Версия DLE: 12.х
 
Автор: WebRambo
Источник:
  • Oxigen
  • 0
  • 387
Информация
Оставлять комментарии могут только зарегистрированные посетители.
  • Рейтинг@Mail.ru
  • Яндекс.Метрика