Шаблоны для Datalife Engine

Адаптивные качественные DLE шаблоны по приятным ценам.

Контакты:
e-mail: redissx@gmail.com telegram: @webrambo
Написать сообщение
Время работы: 10.00 - 20.00 (МСК)
    Ajax подгрузка новостей DLE

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

Приветствую. Для 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]
Написать отзыв
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
В каком из этих слов "шаблон" или "вебрембо" есть буква Ш ?
Отзывов (1)
WMZ
WMZ Посетители 6 июля 2018 22:29
нужная тема - как бы ее в закладки добавить...