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

Купить платные адаптивные DLE шаблоны
по приятным ценам.

Время работы: 10.00 - 18.00 (МСК, пн-пт)
Telegram: @vugluskr2023
Техническая поддержка
Корзина 0
Внимание: Обновление шаблонов до 15 и 17.1 версии. Решение проблем с большими краткими новостями, постерами, рейтингом.
Адаптивные dle шаблоны   Советы и новости   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]


При включении отложенной загрузки изображений (ленивая загрузка Lazy Load) нужно

 HideLoading();

заменить на
 HideLoading(); setTimeout(function() { $(window).lazyLoadXT(); }, 300);

И очистите кеш в браузере. Если не работает значит у вас не очищен кеш и не обновился файл.
Написать отзыв
  • 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
У меня было пять яблок, два яблока я съел. Сколько у меня осталось яблок? Напиши буквой например десять
Отзывов (67)
WMZ
WMZ Гости 6 июля 2018 22:29
нужная тема - как бы ее в закладки добавить...
Владимир
Владимир Гости 1 августа 2018 19:50
После нажатия блок с кнопкой вылетает из dle-content
webrambo
webrambo Администраторы 2 августа 2018 14:41
Владимир, значит неправильно установили или у вас недочеты в верстке (скорее всего с плавающими краткими).
Alenka
Alenka Гости 27 августа 2018 03:36
Здравствуйте, подскажите возможно использовать в фулстори и если да, то как?
webrambo
webrambo Администраторы 28 августа 2018 18:17
Alenka, скорее нет, чем да.
Alenka
Alenka Гости 28 августа 2018 18:30
webrambo
Спасибо за ответ, попробовола сама, но там без "разковыривания" dle похоже никак.
webrambo
webrambo Администраторы 28 августа 2018 18:33
Alenka, а что вы пытаетесь грузить? Следующую новость? Это чревато проблемами, даже если подгрузить.
Alenka
Alenka Гости 28 августа 2018 18:37
webrambo, Одна публикация разбита на несколько страниц, вот и пыталась сделать, что бы следующая страница подгружалась скриптом (без клика по кнопке) и как бы она подгружается ниже (вторая страница) только с дублем тайтла, комментов и прочего... может чего то не понимаю.
webrambo
webrambo Администраторы 28 августа 2018 18:51
Alenka, вам придется разбираться самой.



Навигация полной новости в 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'));
Alenka
Alenka Гости 28 августа 2018 18:55
webrambo, Спасибо за помощь, чуть позже попробую еще раз.
Alenka
Alenka Гости 29 августа 2018 12:02
эх не работает в полной новости, нашла вашу тему на форуме dle, там тоже тихо по этому вопросу, похоже не судьба.
baseroad
baseroad Гости 29 августа 2018 13:07
а как это поставить на статическую страницу?
webrambo
webrambo Администраторы 29 августа 2018 14:31
baseroad, никак, там же даже нет пагинации.
Alenka
Alenka Гости 8 сентября 2018 11:51
webrambo, не могу поверить своим глазам! Вам не стало интересно самому посмотреть почему же не работает скрипт и не подгружает следующую страницу в одной публикации (фуллстори) разбитой на несколько страниц? этого просто не может быть! а как же помочь нуждающимся и спасти планету? :)
webrambo
webrambo Администраторы 8 сентября 2018 17:46
Alenka, не стало. Не знаю с чего вы взяли, что это должно быть интересным. Если у вас не подгружает, значит вы неправильно ставите, вот и все.
Alenka
Alenka Гости 8 сентября 2018 19:04
webrambo, на этой странице нет скрипта который бы работал в фуллстори, вот и все.
webrambo
webrambo Администраторы 8 сентября 2018 19:47
Alenka, satisfied ...........
Alenka
Alenka Гости 8 сентября 2018 20:02
сообщение выше было написано проще в надежде что читающий поймет.
webrambo, НА этой странице нет ГОТОВОГО РАБОЧЕГО скрипта, для Ajax подгрузки в fullstory.tpl публикации раззделенной на несколько страниц ( р а з ж О в а н о ). Есть желание возразить? relaxed
webrambo
webrambo Администраторы 8 сентября 2018 21:05
Alenka, я прекрасно понял, о чем вы писали. Потому и улыбнуло. Конечно же, все рабочее, а в комментарии выше написано, что следует сменить. Вы просто не можете сделать, т.к. не понимаете, что делаете, а копируете методом тыка. И пытаетесь тут манипулировать, что довольно забавно.
Эпик
Эпик Гости 16 сентября 2018 13:47
webrambo, очень забавно наблюдать как человек мучается, забавно до слез.
webrambo
webrambo Администраторы 16 сентября 2018 16:15
Эпик, ну хватит уже, астанавитесь!11 grinning Во-первых, не надо переиначивать то, что я написал. Во-вторых, так не мучайтесь, кто ж вас заставляет? Наймите человека, кто вам за оплату сделает. В-третьих, все написано, точного решения нет, т.к. классы у всех разные. Еще раз

Навигация полной новости в 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'));

где .full-text - это тот класс в который у вас обернут текст вашей новости в fullstory.tpl
Сергей
Сергей Гости 4 октября 2018 11:33
Автор большое спасибо за хак, отлично работает! Очень и очень жаль что не работает на новости, которые выводятся через custom. Выходит просто надпись загрузка и пропадает. Возможно ли как то поправить? В моем случае, новости на главной странице выходят через custom.
webrambo
webrambo Администраторы 7 октября 2018 09:20
Сергей, оберните ваш кастом в <div id="dle-content"></div>
Andrew
Andrew Гости 13 ноября 2018 07:49
Спасибо за модуль!
А вам не встречался скрипт Аякс подгрузки полных новостей при скролле? Чтобы при чтении новости после скролла до футера в основной блок контента подгружалась следующая статья (related или просто следующая в категории)? И чтобы после прогрузки URL страницы менялся тоже.
Очень надо. Помогите найти или наведите на примеры!
webrambo
webrambo Администраторы 13 ноября 2018 15:06
Andrew, это все делается точно также по смыслу. Тут дело в другом. Текст мы можем подгрузить. А как быть с комментариями, например? С комментариями невозможно работать, поэтому и модуля такого до сих пор нет.
Евгений
Евгений Гости 5 января 2019 22:46
webrambo, скрипт работает в стандартном режиме нормально, но с моим кустомом проблема, обернуть оказалось недостаточно.
пробовал так (подключается в main.tpl через инклуд):
<div id="dle-content">
{custom template="shortstory" xfields="label|Новинка" navigation="yes"}
</div>
не помогло. есть другие варианты?
Прохожий
Прохожий Гости 10 июня 2019 15:35
Хорошая реализация, но у меня почему-то не работает подключение стилей, и вместо кнопки, у меня просто надпись загрузить еще. Может подскажете, куда вообще смотреть?
webrambo
webrambo Администраторы 11 июня 2019 17:30
Прохожий, кеш в браузере, на хостинге, cloudflare.
Анатолий
Анатолий Гости 19 ноября 2019 01:47
Всё отлично работает, однако исчезла кнопка "наверх". Видимо, какой-то конфликт
khvcool
khvcool Гости 12 декабря 2019 16:02
Я, конечно, тормоз, но все же. Если на сайте работает LazyLoad. И картинки грузятся при попадании в видимую часть экрана, но с данным хаком оно не работает. Подгружается следующая страница, а картинки не грузятся. Можно как-то исправить это?
webrambo
webrambo Администраторы 12 декабря 2019 16:39
khvcool, HideLoading(''); замените на
HideLoading('');
$('[data-src]').lazyLoadXT();
Василь
Василь Гости 9 января 2020 00:09
Интересно но беда в том што незагружает рейтинг новостей и другие скрипти которие есть в краткой новости
webrambo
webrambo Администраторы 9 января 2020 13:23
Василь, скрипты нужно повторно инициализировать для подгруженного контента. Вставляйте после HideLoading(''); .
Андрей
Андрей Гости 7 апреля 2020 23:07
Подскажите как сделать, у меня стоит на главной странице через custom определенная категория
но он не погружает дальше новости примерно так

<div id="dle-content">
{custom category="2" template="shortstory" available="main" navigation="yes" from="0" limit="32" cache="no"}
</div>

а если обычно сделать то все работает так

<div id="dle-content">
{content}
</div>
webrambo,
webrambo
webrambo Администраторы 8 апреля 2020 07:59
Андрей, никак. Для нескольких кастомов нужно продумывать и вносить изменения в скрипт.
TeraMoune
TeraMoune Гости 13 апреля 2020 19:39
Данный способ ужасен, так как от этого запроса нету никакого толка. Он аналогично обычному захожу задействует все функции. В то время как истинная грамотная ajax реализация при запросе будет задействовать лишь нужный код касательно новости и только её.

Разница между этим методом и хорошим примерно в 150-400мс скорости получения ответа и в несколько sql запросов.
Но не разборчивые хозяева сайтов часто охотно ставят подобное, потом удивляются излишней нагрузке, а в удивление говорят ну я же ajax поставил должно же быть лучше, в интернете так говорят. laughing

А еще этот способ всюду пихают неумелые фрилансеры которые сами ничего не способны сделать, а лишь копируют фришный вот такой код и пихают его опять же не осведомлённым хозяевам на сайт при разработках проектов.
webrambo
webrambo Администраторы 13 апреля 2020 20:05
TeraMoune, данный способ выполняет свою функцию - подгружает без перезагрузки страницы. Производительность и какую задачу вообще хочет решать человек, кроме того, чтобы добавить новости без перезагрузки - это уже другой вопрос и его проблемы. Понимаете о чем я? Поэтому в данном случае критиковать этот способ - это все равно, что критиковать скорость работы ДЛЕ, ведь он равносилен обычному переходу по странице, о чем вы сами и пишите. Если вам не нравится эта подгрузка, то по идее и весь сайт тогда у вас должен быть на "правильной подгрузке", иначе какой толк, что подгрузка по кнопке быстрая, а тот же обычный переход по ссылке меню грузится как обычно.

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

Что касается лично моей позиции на эти миллисекунды, то мне по барабану, у меня никогда не было идеи фикс вылизать все до идеала. Нравится кому-то считать циферки и сидеть с секундомером или у кого-то того требует сам проект - его право. А мне пофиг, никогда не мешало, как юзеру, так и как исполнителю. Я свое место знаю и выше головы прыгать не собираюсь, супер мега крутых проектов с миллионами трафика, где каждый чих на счету, нет ни у меня, ни у моих клиентов.
Bandicoot
Bandicoot Гости 19 апреля 2020 15:12
Спасибо за реализацию, все работает отлично в новостях и категориях.

Единственная проблема - не прогружаются новости при поиске. Есть ли возможность исправить это? Или же только нужно скрывать прокрутку для поиска?
webrambo
webrambo Администраторы 19 апреля 2020 15:25
Bandicoot, в рамках данного скрипта - нет. В поиске другой принцип пагинации. Поэтому для поиска нужно выводить обычную пагинацию, о чем упомянуто в конце статьи.
Даулет
Даулет Гости 18 июля 2020 11:48
Как можно использовать этот скрипт если краткая новость выводиться через тег {custom temlate}
webrambo
webrambo Администраторы 19 июля 2020 17:16
Даулет, оберните ваш кастом в <div id="dle-content"></div>
Бандикут
Бандикут Гости 2 августа 2020 22:36
Добрый день!

А для автоматического скролинга возможно ли установить вручную ограничитель? Условно после 50 загруженных новостей (или 10 страниц) больше не загружать и оставить только постраничную навигацию. Чтобы пользователи могли использовать футер сайта до того, как все 1000+ новостей прокрутятся.
webrambo
webrambo Администраторы 3 августа 2020 12:37
Бандикут, здравствуйте. В философском смысле все можно сделать. А в данном скрипте такой возможности нет и не будет.
Андрей
Андрей Гости 7 августа 2020 15:50
Большое спасибо за реализацию!!!
Первый вариант - работает на ура! Есть только один вопрос - реально ли, чтобы по клику на кнопку подгрузка новостей проходила на текущей странице, догружая тем самым новости к уже открытым?

Заранее благодарен за ответ
webrambo
webrambo Администраторы 7 августа 2020 21:09
Андрей, если вы про изменение адреса в адресной строке, то удалите эту строчку
window.history.pushState("", "", urlNext);
Andy
Andy Гости 11 августа 2020 14:13
Работает отлично, правда есть один момент - при подгрузке новостей, в подгружаемых не отображается html5 плеер. В чем может крыться загвоздка? site: detkam-online.com/minusovki/
webrambo
webrambo Администраторы 11 августа 2020 14:32
Andy,потому что плеер вызывается скриптом, а любой скрипт при ajax загрузке нужно запустить заново. Я вам в этом помочь не могу, могу только сказать, что ставить запуск нужно после HideLoading('');
Смотрите файлы DLE, как там это работает, как вызывается и делайте. Либо спросите на оф. форуме или https://dle-faq.ru/
Andy
Andy Гости 20 августа 2020 16:24
webrambo, вдруг кому пригодтся. Для решения этой проблемы нужно заменить эту строку

$('#dle-content').append($('#dle-content', data).html());

на вот это

$(".dleaudioplayer").addClass("player_ready");
$('#dle-content').append($('#dle-content', data).html());
$(".dleaudioplayer").not(".player_ready").cleanaudioplayer();
webrambo
webrambo Администраторы 20 августа 2020 17:55
Andy, хорошо, спасибо, пригодится.
mihadmitriev
mihadmitriev Гости 6 января 2021 05:27
webrambo,
Доброй ночи, а если и этот метод не сработал.
Так все отлично работает, но именно после ленивой не работает. Есть еще варианты?
1 2