Перейти к публикации

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


Рекомендованные сообщения

8 часов назад, Shohxusrav сказал:

Здравствуйте!

 

У вас отличный хак. Но есть вопрос. Если новости показывает в main.tpl с помощью тег {content} работает без проблем.

А я пользуюсь с тег {custom}. Потому что мне нужно выводить определенный новости с категориями. 

 

Мой вариант:

{custom category="5-6" template="shortstory" aviable="global" from="0" limit="20" order="date" navigation="yes"}

 

Как можно разобраться что хак работал тоже с {custom} тегам.

 

Спасибо!

Оберните свой кастом в <div id="dle-content"></div>

Изменено пользователем redissx
Ссылка на сообщение
Поделиться на других сайтах

Здравствуйте.

 

Отличный хак, спасибо.

 

Вопрос по существу:

 

У меня, в navigation.tpl, перед навигацией {pages}, на сайте загружается рекламный блок Яндекс.Директ:

 

Соответственно, в navigation.tpl добавлен код:

 

<div id="yandex_ad2_{page_now}"></div>

<script type="text/javascript">
        (function(w, d, n, s, t) {
            w[n] = w[n] || [];
            w[n].push(function() {
                Ya.Direct.insertInto(XXXXXX, "yandex_ad2_{page_now}", {
                    site_charset: "windows-1251",

............
</script>

<!-- стандартная навигация -->

 

В шаблон к рекламному блоку добавлена переменная с текущей страницей - {page_now}.

 

Так вот, на первой странице код Директа отрабатывается, реклама показывается.

На последующих подгруженных ajax-страницах эти рекламные div пустые.

 

Т.е.

id="yandex_ad2_1" - есть реклама 

id="yandex_ad2_2" - пусто и т.д.

 

Вопрос: как это поправить?

Как подгружать рекламу в последующие, после первого div?

 

Пишут, что:

 

Цитата

На AJAX-сайтах с помощью асинхронного кода можно настроить обновление содержимого рекламного блока при изменении контента страницы или при другом указанном событии. Для этого необходимо повторно вызывать функцию:
Ya.Direct.insertInto( XXXX, "yandex_ad", { /*… Настройки вашего блока … */}) ;

Так вот, как и где повторно вызывать эту Ya.Direct.insertInto() ?

 

Заранее благодарю за ответ.

Ссылка на сообщение
Поделиться на других сайтах
16 часов назад, kind_whale сказал:

Здравствуйте.

 

Отличный хак, спасибо.

 

Вопрос по существу:

 

У меня, в navigation.tpl, перед навигацией {pages}, на сайте загружается рекламный блок Яндекс.Директ:

 

Соответственно, в navigation.tpl добавлен код:

 


<div id="yandex_ad2_{page_now}"></div>

<script type="text/javascript">
        (function(w, d, n, s, t) {
            w[n] = w[n] || [];
            w[n].push(function() {
                Ya.Direct.insertInto(XXXXXX, "yandex_ad2_{page_now}", {
                    site_charset: "windows-1251",

............
</script>

<!-- стандартная навигация -->

 

В шаблон к рекламному блоку добавлена переменная с текущей страницей - {page_now}.

 

Так вот, на первой странице код Директа отрабатывается, реклама показывается.

На последующих подгруженных ajax-страницах эти рекламные div пустые.

 

Т.е.

id="yandex_ad2_1" - есть реклама 

id="yandex_ad2_2" - пусто и т.д.

 

Вопрос: как это поправить?

Как подгружать рекламу в последующие, после первого div?

 

Пишут, что:

 

Так вот, как и где повторно вызывать эту Ya.Direct.insertInto() ?

 

Заранее благодарю за ответ.

1. скрипт тогда нужно помещать в маин.тпл перед </body>

2. перезапуск вставляется тут

         
                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('');
                }

                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('');
					Ya.Direct.insertInto(XXXXXX, "yandex_ad2_{page_now}", {
						site_charset: "windows-1251",
						.........
					};
                }

я не знаю как  точно перезапускать, эту проблему уже решать вам.

 

Хотя не так все просто, {page_now}" же тоже меняется, выходит перед </body> не пойдет, возможно скрипт прямо в navigation.tpl в #bottom-nav, но тогда надо обязательно чтобы длешные скрипты подключались перед ним, то есть аккуратнее с {jsfiles}. Также выходит что подгрузку можно только при клике.

 

В общем, придется вам поломать голову.

Изменено пользователем redissx
Ссылка на сообщение
Поделиться на других сайтах

Да, действительно не всё так просто.

Попробовал изменить код вызова на RTB, почитал "Показ рекламы в лентах с бесконечной прокруткой"

https://yandex.ru/support/partner2/web/products-rtb/partner-code.html

 

Пробовал добавлять код и в navigation.tpl и Вашу функцию:

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('');
					
		            Ya.Context.AdvManager.render({
		                blockId: "R-A-XXXXX-4",
		                renderTo: "yandex_rtb_R-A-XXXX-4-{page_now}",
		                pageNumber: {page_now},
		                async: true
		            });

                }

Но не работает.

 

На первой странице первый рекламный блок отображается. Его код в браузере:

<div id="yandex_rtb_R-A-XXX-4-1">код рекламы</div>
<script type="text/javascript">
		    (function(w, d, n, s, t) {
		        w[n] = w[n] || [];
		        w[n].push(function() {
		            Ya.Context.AdvManager.render({
		                blockId: "R-A-XXX-4",
		                renderTo: "yandex_rtb_R-A-XXX-4-1",
		                pageNumber: 1,
		                async: true
		            });
		        });
		        t = d.getElementsByTagName("script")[0];
		        s = d.createElement("script");
		        s.type = "text/javascript";
		        s.src = "//an.yandex.ru/system/context.js";
		        s.async = true;
		        t.parentNode.insertBefore(s, t);
		    })(this, this.document, "yandexContextAsyncCallbacks");
		</script>

А код остальных блоков не содержит <script>...</script>:

<div id="yandex_rtb_R-A-XXX-4-2"></div>
(нет <script>)

Вопрос: как для второго и последующих блоков добавить js-код вызова <script>...</script>?

 

Спасибо заранее.

Изменено пользователем kind_whale
Ссылка на сообщение
Поделиться на других сайтах
18 часов назад, kind_whale сказал:

Да, действительно не всё так просто.

Попробовал изменить код вызова на RTB, почитал "Показ рекламы в лентах с бесконечной прокруткой"

https://yandex.ru/support/partner2/web/products-rtb/partner-code.html

 

Пробовал добавлять код и в navigation.tpl и Вашу функцию:


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('');
					
		            Ya.Context.AdvManager.render({
		                blockId: "R-A-XXXXX-4",
		                renderTo: "yandex_rtb_R-A-XXXX-4-{page_now}",
		                pageNumber: {page_now},
		                async: true
		            });

                }

Но не работает.

 

На первой странице первый рекламный блок отображается. Его код в браузере:


<div id="yandex_rtb_R-A-XXX-4-1">код рекламы</div>
<script type="text/javascript">
		    (function(w, d, n, s, t) {
		        w[n] = w[n] || [];
		        w[n].push(function() {
		            Ya.Context.AdvManager.render({
		                blockId: "R-A-XXX-4",
		                renderTo: "yandex_rtb_R-A-XXX-4-1",
		                pageNumber: 1,
		                async: true
		            });
		        });
		        t = d.getElementsByTagName("script")[0];
		        s = d.createElement("script");
		        s.type = "text/javascript";
		        s.src = "//an.yandex.ru/system/context.js";
		        s.async = true;
		        t.parentNode.insertBefore(s, t);
		    })(this, this.document, "yandexContextAsyncCallbacks");
		</script>

А код остальных блоков не содержит <script>...</script>:


<div id="yandex_rtb_R-A-XXX-4-2"></div>
(нет <script>)

Вопрос: как для второго и последующих блоков добавить js-код вызова <script>...</script>?

 

Спасибо заранее.

Если бы я знал точный ответ, то сразу бы и ответил. Но я его не знаю. Перезапуск функций или если что-то нужно сделать, то это ставится здесь

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('');
					/* здесь мы выполняем все свои действия после того, как все загрузилось и добавилось */
                }

Как именно это сделать с рекламой я не знаю и за вас не сделаю. Попробуйте обратиться в тех. поддержку рекламной сети, им виднее, как это сделать.

Ссылка на сообщение
Поделиться на других сайтах

<img src="{THEME}/images/no_foto.gif" data-src="{fullimage-1}" alt="">

 

redissx у меня картинки не загружаются из-за этого скрипта. 

 

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer.getAttribute('data-src')) {
imgDefer.setAttribute('src',imgDefer.getAttribute('data-src'));
} } }
window.onload = init;
</script>

 

Что нужно сделать, чтоб срабатывал и этот скрипт и фотографии тоже появлялись? 

Ссылка на сообщение
Поделиться на других сайтах
В 04.12.2018 в 15:14, footballhd сказал:

<img src="{THEME}/images/no_foto.gif" data-src="{fullimage-1}" alt="">

 

redissx у меня картинки не загружаются из-за этого скрипта. 

 

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer.getAttribute('data-src')) {
imgDefer.setAttribute('src',imgDefer.getAttribute('data-src'));
} } }
window.onload = init;
</script>

 

Что нужно сделать, чтоб срабатывал и этот скрипт и фотографии тоже появлялись? 

Не из-за этого скрипта, а потому что в принципе так работают скрипты. Все что связано с манипуляцией с DOM нужно перезапускать. Где вписать перезапуск написано чуть выше.

Ссылка на сообщение
Поделиться на других сайтах
5 часов назад, footballhd сказал:

redissx

Как сделать так чтоб в тегах тоже загружались так новости? 

По идее так

[aviable=main|cat|tags]
<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|tags]
<!-- обычная навигация -->
[/not-aviable]

 

Ссылка на сообщение
Поделиться на других сайтах

redissx

Нет так не работает. Я уже пробовал делать так. 

 

[aviable=cat|tags]
<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=cat|tags]{pages}[/not-aviable]

В такой ситуации просто показывают столько новостей сколько на 1 странице. Дальше ничего не происходит. Пишет что идет загрузка, но так можно ждать долго. 

Ссылка на сообщение
Поделиться на других сайтах
21 час назад, footballhd сказал:

redissx

Нет так не работает. Я уже пробовал делать так. 

 


[aviable=cat|tags]
<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=cat|tags]{pages}[/not-aviable]

В такой ситуации просто показывают столько новостей сколько на 1 странице. Дальше ничего не происходит. Пишет что идет загрузка, но так можно ждать долго. 

Загрузка начинает идти, но что-то ее останавливает. Смотрите консоль браузера. Думаю, перезапуск функции вы вставили, а саму функцию на странице тегов потеряли.

Ссылка на сообщение
Поделиться на других сайтах
В 30.11.2017 в 15:30, redissx сказал:

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

 

Загрузка при клике по кнопке


В итоге мы получим это

1512035499_firefox_screenshot_2017-11-30

 

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]

Еще раз здравствуйте!

 

А как можно сделать что бы рекламный баннеры показался между контентом после каждый 20 новость.

 

Мой конф:

<div id="dle-content">{custom category="11,13-20" template="shortstory" aviable="main" from="0" limit="20" order="date" navigation="yes"}</div>

Спасибо!

Изменено пользователем Shohxusrav
Ссылка на сообщение
Поделиться на других сайтах
9 часов назад, Shohxusrav сказал:

 

А как можно сделать что бы рекламный баннеры показался между контентом после каждый 20 новость.

Вставить можно в shortstory.tpl с помощью тега newscount. А будет ли показываться - это уже другой вопрос.

Ссылка на сообщение
Поделиться на других сайтах

Установил первый пример по клику на кнопку. Но при нажатии на "загрузить еще" просто перекидывает на след страницу, а не подгружает ее. Крч, работает как обычная кнопка "далее". Подскажите что не так может быть?

 

Ссылка на сообщение
Поделиться на других сайтах
17 часов назад, Mark456 сказал:

Установил первый пример по клику на кнопку. Но при нажатии на "загрузить еще" просто перекидывает на след страницу, а не подгружает ее. Крч, работает как обычная кнопка "далее". Подскажите что не так может быть?

 

Значит не срабатывает скрипт. Раз не срабатывает, значит жс ошибка. Раз ошибка, значит ошиблись в установке. Вероятно, скрипты движка ({headers}, {jsfiles}) находятся ниже по коду страницы, чем скрипт погрузки.

Ошибку можете посмотреть в консоли браузера.

Ссылка на сообщение
Поделиться на других сайтах
  • 2 недели спустя...
В 20.12.2018 в 15:42, redissx сказал:

Значит не срабатывает скрипт. Раз не срабатывает, значит жс ошибка. Раз ошибка, значит ошиблись в установке. Вероятно, скрипты движка ({headers}, {jsfiles}) находятся ниже по коду страницы, чем скрипт погрузки.

Ошибку можете посмотреть в консоли браузера.

такая же ситуация, при установке первого варианта, работает как кнопка "далее". Если установить второй вариант, то проблем нет, все работает и правильно подгружает.

Подскажите где копать? (сам не спец, но навык небольшой есть)

Ссылка на сообщение
Поделиться на других сайтах
В 30.12.2018 в 17:50, jeka66 сказал:

такая же ситуация, при установке первого варианта, работает как кнопка "далее". Если установить второй вариант, то проблем нет, все работает и правильно подгружает.

Подскажите где копать? (сам не спец, но навык небольшой есть)

Смотрите консоль браузера, там все пишет.

Ссылка на сообщение
Поделиться на других сайтах
В 02.01.2019 в 18:57, redissx сказал:

Смотрите консоль браузера, там все пишет.

ставил эксперименты на локальной версии (12.1-1251), после обновления до 13.1-utf8, проблема исчезла. Возможно некорректно скачал с хостинга файлы перед экспериментом... В общем все работает сейчас нормально.

 

Возник вопрос: после достижения последней новости, кнопка "ЗАГРУЗИТЬ ЕЩЕ" становится неактивная, но остается. Есть возможность ее отключать по достижении конца списка?

Изменено пользователем jeka66
Ссылка на сообщение
Поделиться на других сайтах
1 час назад, jeka66 сказал:

ставил эксперименты на локальной версии (12.1-1251), после обновления до 13.1-utf8, проблема исчезла. Возможно некорректно скачал с хостинга файлы перед экспериментом... В общем все работает сейчас нормально.

 

Возник вопрос: после достижения последней новости, кнопка "ЗАГРУЗИТЬ ЕЩЕ" становится неактивная, но остается. Есть возможность ее отключать по достижении конца списка?

вопрос решился полной очисткой кеша на сайте и в браузере...

Ссылка на сообщение
Поделиться на других сайтах
  • 2 месяца спустя...

DLE 13.2 с использованием lazy загрузки. При нажатие на "Загрузить ещё", картинки не грузятся.

Ссылка на сообщение
Поделиться на других сайтах
12 часов назад, alexpsp сказал:

DLE 13.2 с использованием lazy загрузки. При нажатие на "Загрузить ещё", картинки не грузятся.

$(window).on('ajaxComplete', function() {
  setTimeout(function() {
    $(window).lazyLoadXT();
  }, 50);
});

После этого скрипта.

https://github.com/ressio/lazy-load-xt#ajax

  • Нравится 1
  • Поддерживаю 1
  • Спасибо 1
Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...