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

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


Загрузка следующих новостей при клике по кнопке.

Установка:
1. Открыть navigation.tpl шаблона и добавить:
[code[/code]
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]

При включении отложенной/ленивой загрузки изображений Lazy Load, следует в JS коде сроку:

HideLoading();

Заменить на:

HideLoading(); setTimeout(function() { $(window).lazyLoadXT(); }, 300);

Важно: после применения хака очистите кеш в браузере. Если не работает - значит у вас не очищен кеш и не обновился файл. • Версия DLE: 12.х-14.x
• Автор: WebRambo
• Источник