Ajax подгрузка новостей DLE
Приветствую. Для ajax подгрузки новостей существует множество плагинов с кучей разных настроек. Но если вам требуется только подгрузка и ничего более, то предлагаю не грузить лишнего и воспользоваться этим небольшим решением.
В итоге мы получим это
1. В navigation.tpl вашего шаблона
2. В конец css файла вашего шаблона
3. В конец js файла вашего шаблона
В итоге по мере прокрутки к нижним новостям следующие новости будут автоматически загружаться.
1. В navigation.tpl вашего шаблона
2. В конец css файла вашего шаблона
3. В конец js файла вашего шаблона
здесь в строке
цифра 50 - это расстояние до нижнего края новостей при котором начинается загрузка. То есть вы можете немного заранее загружать, пока юзер не доскроллил до конца, меняя эту цифру. Например, 250 - новости будут загружаться раньше.
Также замечу, что рекомендуется использовать загрузку только на главной и в категории во избежание проблем. Обычно я делаю так в navigation.tpl
При включении отложенной загрузки изображений (ленивая загрузка Lazy Load) нужно
заменить на
И очистите кеш в браузере. Если не работает значит у вас не очищен кеш и не обновился файл.
Загрузка при клике по кнопке
В итоге мы получим это
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]
При включении отложенной загрузки изображений (ленивая загрузка Lazy Load) нужно
HideLoading();
заменить на
HideLoading(); setTimeout(function() { $(window).lazyLoadXT(); }, 300);
И очистите кеш в браузере. Если не работает значит у вас не очищен кеш и не обновился файл.
Отзывов (67)