CMS DataLife Engine - Система управления сайтами

Sign in to follow this  
alex32

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

Recommended Posts

 

Вот,  граждане просили 

 

 

Вставить в js файл 

$(window).scroll(function() {
    if ($(".load-link").length) {
        var loadLink = $('.load-link').filter(':last');
        var loadOffset = loadLink.offset().top;
        if (loadOffset <= $(window).scrollTop()) {
            var href = loadLink.attr('href');
            if (href !== undefined) {
                loadLink.remove();
                getContent(href, true);
            };
        }
    }
});
window.addEventListener("popstate", function(e) {
    getContent(location.pathname, false);
});
function getContent(url, addEntry) {
    $.get(url).done(function(data) {
        $('#dle-content').append($(data).find(".news-container").get(0).outerHTML);//если через html() то новость будет без обертки
        if (addEntry == true) {
            history.pushState(null, null, url);
        }
    });
}

В строке 

 $('#dle-content').append($(data).find(".news-container")

класс .news-container заменить на класс блока, в который обернута полная новость (в шаблоне fullstory.tpl).

В сам шаблон fullstory.tpl  вниз перед закрывающим тегом вставляем 

[prev-url]<a href="{prev-url}" class="load-link"></a>[/prev-url]

по уму надо бы прикрутить обратную смену урлов при прокрутке вверх, но мне лень возиться.

 

 

  • Upvote 1
  • Thanks 3

Share this post


Link to post
Share on other sites

Кайф! Подгон крутой, вот только у меня не работает что-то

Share this post


Link to post
Share on other sites
1 час назад, alexpsp сказал:

Кайф! Подгон крутой, вот только у меня не работает что-то

вот именно что "что-то". я же не телепат.

Share this post


Link to post
Share on other sites

@alex32 я бы добавил что не будет работать ajax добавление комментариев и редакторы при добавлении комментариев из подгруженных новостей, а так же что если новость не является самой первой, что бы сразу отсечь не нужные вопросы у людей.

Share this post


Link to post
Share on other sites
4 часа назад, Gameer сказал:

@alex32 я бы добавил что не будет работать ajax добавление комментариев и редакторы при добавлении комментариев из подгруженных новостей, а так же что если новость не является самой первой, что бы сразу отсечь не нужные вопросы у людей.

ели первой будет, там же prev-url, а аякс комменты да, не будут. Но, чисто по логике, с таким выводом новостей, комменты оттуда убирать надо. Надо плагин писать и если запрос новости аяксом то вырезать их.

Share this post


Link to post
Share on other sites

В целом работает, но...

1) в подгружаемой статье не подгружается заголовок

2) подгружаемая статья только одна, а нужны все из категории, в которой находится эта новость. Суть моего запроса была именно в бесконечной прокрутке до последней новости (как в лентах фейсбука или вконтакте, например)

А комменатрии и остальные примочки (типа рейтинга подгружаемых новостей)  - это уже дело вторичное.

Такое, полагаю, уже за доп плату надо заказывать.

 

Про обратные урлы я уже не повторялся, про них указано в старт-посте.

Edited by DLE рулит

Share this post


Link to post
Share on other sites
47 минут назад, DLE рулит сказал:

1) в подгружаемой статье не подгружается заголовок

 

подгружается. Значит неправильно указаны классы

47 минут назад, DLE рулит сказал:

2) подгружаемая статья только одна, а нужны все из категории, в которой находится эта новость.

Подгружаются все, значит не так что-то подключено или не те классы указаны. Так же важно направление сортировки в категории. Если в новости есть ссылка на предыдущую новость, которая выводится стандартным тегом {prev-url} значит она подгрузится. 

47 минут назад, DLE рулит сказал:

Про обратные урлы я уже не повторялся, про них указано в старт-посте.

мне  лень

 

PS. Перед тем, как экспериментировать, убедитесь сначала, что в шаблоне изначально нет ошибок js.

Edited by alex32

Share this post


Link to post
Share on other sites
29 минут назад, DLE рулит сказал:

1) в подгружаемой статье не подгружается заголовок

2) подгружаемая статья только одна, а нужны все из категории, в которой находится эта новость. Суть моего запроса была именно в бесконечной прокрутке до последней новости (как в лентах фейсбука или вконтакте, например)

Не учел один нюанс на своей стороне, все работает.

Если допилите еще возвратные урлы, то 10$ с меня 🙂

 

Еще такой вопрос: 

15 часов назад, alex32 сказал:

В строке 


 $('#dle-content').append($(data).find(".news-container")

класс .news-container заменить на класс блока, в который обернута полная новость (в шаблоне fullstory.tpl).

Можно ли там несколько классов указать? Например, у меня класс, который оборачивает полную новость (.full-news), захватывает так же дату создания новости и ее рейтинг. Я хочу сделать, чтобы в подгружаемых новостях был только заголовок (.full-news h1) и сам текст новости (.full-news-content), без рейтинга и даты.

Share this post


Link to post
Share on other sites
11 минут назад, DLE рулит сказал:

Можно ли там несколько классов указать? Например, у меня класс, который оборачивает полную новость (.full-news), захватывает так же дату создания новости и ее рейтинг. Я хочу сделать, чтобы в подгружаемых новостях был только заголовок (.full-news h1) и сам текст новости (.full-news-content), без рейтинга и даты.

нет, несколько нельзя. Это обертка.

Сделай так 

function getContent(url, addEntry) {
    $.get(url).done(function(data) {
    	var getData = $(data).find(".entry-item").get(0).outerHTML;    	
        $('#dle-content').append(getData).find(".delete-selector").not(":first").remove();  
        if (addEntry == true) {
            history.pushState(null, null, url);
        }
    });
}

delete-selector это класс, в который обернуты у тебя  рейтинг и дата. Только они оба должны быть в одном блоке 

 

то есть типа такого 

<div class="full-news">
	<h1>{title}</h1>
	<div>{full-story}</div>
	<div class="delete-selector">
		<span>{date}</span>
		<div class="rating">{rating}</div>
	</div>
</div>

 

Share this post


Link to post
Share on other sites
3 часа назад, alex32 сказал:

Сделай так

Этим заменить надо или добавить?

Edited by DLE рулит

Share this post


Link to post
Share on other sites
15 минут назад, DLE рулит сказал:

Этим заменить надо или добавить?

заменить функцию getContent

Share this post


Link to post
Share on other sites
1 минуту назад, alex32 сказал:

заменить функцию getContent

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

Share this post


Link to post
Share on other sites
3 минуты назад, DLE рулит сказал:

В этом куске кода нет класса, который подгружает непосредственно саму новость.

а догадаться поменять селектор .entry-item из примера на свой .full-news сложно?

Share this post


Link to post
Share on other sites

@alex32, а для подгруженных новостей будет прибавляться количество просмотров?

Share this post


Link to post
Share on other sites
8 минут назад, alex32 сказал:

а догадаться поменять селектор

 

18 часов назад, alex32 сказал:

я же не телепат

 

А так, спасибо. Работает. ☺️

p.s. Кто готов сделать замену ссылок в строке браузера при скролле новостей ввер-вниз, напишите в личку.

Share this post


Link to post
Share on other sites
29 минут назад, Spyhog сказал:

@alex32, а для подгруженных новостей будет прибавляться количество просмотров?

понятия не имею.

Share this post


Link to post
Share on other sites

@DLE рулит на держи, спешиал фор ю

 

$.fn.isInViewport = function() {
	var elementTop = $(this).offset().top;
	var elementBottom = elementTop + $(this).outerHeight();
	var viewportTop = $(window).scrollTop();
	var viewportBottom = (viewportTop + $(window).height()) - 400;
	return(elementBottom > viewportTop && elementTop < viewportBottom);
};
var contentBlock = '#dle-content'; //блок, куда будут подгружаться новости
var link = '.load-link'; //селектор ссылки на предыдущую/следущую новость, зависит от направления сортировки
var fullStory = '.entry-item'; //селектор блока-обертки полной новости
var delBlock = false; //селектор блока для удаления, например '.comments'

var lastActiveLink = window.location.href;
var activeLink = "";

$(window).on('resize scroll', function() {
	$(fullStory).each(function() {
		activeLink = $(this).data("url");
		if($(this).isInViewport() && lastActiveLink != activeLink) {
			lastActiveLink = activeLink;
			history.pushState(null, null, activeLink);
		}
	});
	if($(link).length) {
		var loadLink = $(link).filter(':last');
		var loadOffset = loadLink.offset().top;
		if((($(window).scrollTop() + $(window).height()) + 650) >= $(document).height()) {
			var href = loadLink.attr('href');
			if(href !== undefined) {
				loadLink.remove();
				getContent(href, true);
			};
		}
	}
});
window.addEventListener("popstate", function(e) {
	getContent(location.pathname, false);
});
window.addEventListener('statechange', function(e) {
	loadPage(location);
});

function getContent(url, addEntry) {
	$.get(url).done(function(data) {
		var getData = $(data).find(fullStory).get(0).outerHTML;
		$(contentBlock).append(getData).find(delBlock).not(":first").remove();
		if(addEntry == true) {
			history.pushState(null, null, url);
		}
	});
}

 

О, самое главное то забыл. Открываем шаблон полно новости и блоку-обертке добавляем атрибут url, например

<div class="entry-item" data-url="{full-link}">
  ...  код шаблона полной новости {full-story} и тд   ...
  
  
<!-- И не забываем ссылочку на предыдущую  -->
[prev-url]<a href="{prev-url}" class="load-link"></a>[/prev-url]
 <!--  либо следующую новость, но ссылка для загрузки должна быть только одна-->
[next-url]<a href="{next-url}" class="load-link"></a>[/next-url]  
  
</div>
  
  

 

Edited by alex32
  • Thanks 2

Share this post


Link to post
Share on other sites
1 час назад, alex32 сказал:

на держи, спешиал фор ю

Это не спешл фор ю, это спешл фор

22 часа назад, alex32 сказал:

телепат

🙂

 

Сиди и догадывайся какой селектор где менять.

Share this post


Link to post
Share on other sites
9 минут назад, DLE рулит сказал:

Сиди и догадывайся какой селектор где менять.

там все написано

 

var contentBlock = '#dle-content'; //блок, куда будут подгружаться новости
var link = '.load-link'; //селектор ссылки на предыдущую/следущую новость, зависит от направления сортировки
var fullStory = '.entry-item'; //селектор блока-обертки полной новости
var delBlock = false; //селектор блока для удаления, например '.comments'

 

Что тут непонятно? Прописать 4 класса всего надо. 

Edited by alex32

Share this post


Link to post
Share on other sites

По рукам бы надавать владельцам таких сайтов, которые действительно так подгружают комментарии и новости. Мало того, что загружаются лишние данные, так ведь и при большом кол-во хостов — огромная нагрузка на сам сервер.

Edited by captaindib

Share this post


Link to post
Share on other sites
4 минуты назад, captaindib сказал:

огромная нагрузка на сам сервер.

Что просто полную новость открыть, что здесь новость подгружается - нагрузка одинаковая

Share this post


Link to post
Share on other sites
12 минут назад, alex32 сказал:

Что просто полную новость открыть, что здесь новость подгружается - нагрузка одинаковая

Неодинаковая. Такие запросы загружают весь html страницы и уже с помощью методов find или $('.class', data).html() берется блок и тупо впихивается в страничку, что конечно так и должно быть, но сам факт того, что подобные запросы еще раз загружают полную страницу, которая может весить сотнями кб - беда.

 

Если трафика мало, то можно просто забить, как большинство, но в идеале запрос должен отдавать только JSON, который уже будет парситься или html код с самими комментариями/новостями, а не тупо всю страницу, которая потом просто обрезается и дело с концами.

Edited by captaindib

Share this post


Link to post
Share on other sites
8 минут назад, captaindib сказал:

Неодинаковая. Такие запросы загружают весь html страницы и уже с помощью методов find или $('.class', data).html() берется блок и тупо впихивается в страничку, что конечно так и должно быть, но сам факт того, что подобные запросы еще раз загружают полную страницу, которая может весить сотнями кб - беда.

 

Если трафика мало, то можно просто забить, как большинство, но в идеале запрос должен отдавать только JSON, который уже будет парситься или html код с самими комментариями/новостями, а не тупо всю страницу, которая потом просто обрезается и дело с концами.

Круто. А нагрузка на сервер где? Открой полную новость будет та же самая нагрузка.

Подгрузка новости site.ru/category/1-news.html  в полную новость полностью равносильно по нагрузке открытию новости site.ru/category/1-news.html  по ссылке в новом окне. Нет смысла огород городить.

Edited by alex32

Share this post


Link to post
Share on other sites
2 часа назад, alex32 сказал:

Круто. А нагрузка на сервер где? Открой полную новость будет та же самая нагрузка.

Подгрузка новости site.ru/category/1-news.html  в полную новость полностью равносильно по нагрузке открытию новости site.ru/category/1-news.html  по ссылке в новом окне. Нет смысла огород городить.

Не равносильна, там могут быть кастомы, какие то модули подключатся через инклюды и т.д., при наличии AJAX запроса отдаётся только нужные данные, например в JSON.

Share this post


Link to post
Share on other sites
4 часа назад, mr. Freeman сказал:

Не равносильна, там могут быть кастомы, какие то модули подключатся через инклюды и т.д., при наличии AJAX запроса отдаётся только нужные данные, например в JSON.

Еще раз: в данной реализации подгрузка новости site.ru/category/1-news.html  в полную новость полностью равносильна по нагрузке открытию новости site.ru/category/1-news.html  по ссылке в новом окне. 

Когда открываешь полную новость по ссылке, точно так же грузятся и инклюды и кастомы и все остальное. Грузится то же самый контент. Разницы никакой. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this