Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Отложенная загрузка контента через div Ajax'ом (https://javascript.ru/forum/events/83959-otlozhennaya-zagruzka-kontenta-cherez-div-ajax%27om.html)

Vaska 27.04.2022 03:25

Отложенная загрузка контента через div Ajax'ом
 
Приветствую!
На странице есть контент, который разделен на несколько блоков, заключённых в div, имеющих свой class.
После первой загрузки страницы? часть блоков, которые видимы, грузятся Ajax'ом сразу, а остальные блоки, которые находятся за пределами экрана, не должны загружаться.
Остальные блоки должны подгружаться по мере видимости при прокрутке скролла вниз или вверх, в зависимости на каком уровне просмотра перезагрузили страницу или открыли новую страницу, заранее за 50px..

В интернетах ничего хорошего не нашел, только плагины для jQuery, но это не подходит, слишком много для этой задачи.
Хотелось бы небольшой скрипт на javascript, для решения.

Например:
в шаблоне есть div
<div id="guesslike_div"></div>


Применяю такой код:
//Подгружает контент внутри div #guesslike_div, если скроллят страницу и элемент попадает в область видимости
	$(document).ready(function(){
		$(window).scroll(function() {
			//check if your div is visible to user
			if ($(window).scrollTop() + $(window).height() >= $('#guesslike_div').offset().top) {
				if(!$('#guesslike_div').attr('loaded')) {
					//not in ajax.success due to multiple sroll events
					$('#guesslike_div').attr('loaded', true);				
					$('#guesslike_div').load("/get_guesslike.html", function(){
						$(this).show();
					});					
				}
			}
		});
	});


Но работает этот код нестабильно.
При первой загрузке, если блок
<div id="guesslike_div"></div>
в области видимости, то скрипт его не подгружает, а погружает только если немного прокрутить скролл.
А так же, если находишься внизу страницы и перезагрузить страницу, то все блоки, которые находятся в верхней части страницы, за пределами видимости, все загружаются, а так быть не должно, они должны быть в отложенной загрузке.

Можете исправить этот скрипт или предложите свой вариант?
Хорошим вариантом был бы один общий скрипт, который можно разместить внизу футера, и в div добавлять активный class, для активации функции отложенной загрузки для этого дива, а для вызов Ajax обернуть в функцию этого скрипта. У каждого div свой Ajax, который вызывает свой файл .html с контентом.
Заранее спасибо, откликнувшимся!

рони 27.04.2022 07:35

Vaska,
рыть в сторону IntersectionObserver, на форуме куча примеров.


можно почитать учебник


Часовой пояс GMT +3, время: 14:13.