Показать сообщение отдельно
  #1 (permalink)  
Старый 29.04.2022, 21:29
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 163

Отложенная загрузка контента через div Ajax'ом
Приветствую!
Есть страница .HTML:
<html>
	<head>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
		<style>
			header {
				background: cyan;
				min-height: 100px;
			}

			.content_container {

				background: rgba(255, 0, 0, 0.3);
				padding: 20px;
                display: none;
			}

			.inner-content {
				height: 400px;
				margin: 5px;
				background: red;
			}

			footer {
				background: cyan;
				min-height: 500px;
			}
		</style>
	</head>
	<body>
		<header>
			<div>other content</div>
			<p>text two</p>
		</header>
		
		<div id="haupt">
			<div id="acidhaupt" class="haupt-wrap background-color">
				<div class="content_container">
					<div id="content_a" class="inner-content"></div>
					<div id="content_b" class="inner-content"></div>
					<div id="content_c" class="inner-content"></div>
					<div id="content_d" class="inner-content"></div>     
				</div>
			</div>
		</div>					
		<footer>
			<p>footer content</p>
		</footer>
		<script>
			$(function () {
				$("#content_a").load("/first.html", function(){
					if($(this).html() != '') {
						$(this).show();
					}				
				}); 
				$("#content_b").load("/second.html", function(){
					if($(this).html() != '') {
						$(this).show();
					}				
				}); 
				$("#content_c").load("/third.html", function(){
					if($(this).html() != '') {
						$(this).show();
					}				
				}); 
				$("#content_d").load("/fourth.html", function(){
					if($(this).html() != '') {
						$(this).show();
					}				
				}); 
			}); 				
		</script>
	</body>
</html>

На странице выводится 4 блока, в которые подгружается Ajax'ом разный контент.
После первой загрузки страницы, часть блоков, которые видимы, грузятся Ajax'ом сразу, а остальные блоки, которые находятся за пределами экрана, не должны загружаться.
Невидимые блоки должны подгружаться по мере видимости при прокрутке скролла вниз или вверх, в зависимости на каком уровне просмотра перезагрузили страницу или открыли новую страницу, заранее за 50px..
Почитал про IntersectionObserver, но я могу его сделать только под каждый div индивидуально, это слишком много кода для многих блоков, а мне нужно сделать оптимизированный код:
один общий скрипт, с применением IntersectionObserver, который можно разместить внизу футера, и в div добавлять активный class, для активации функции отложенной загрузки для этого дива, а для вызов Ajax обернуть в функцию этого скрипта. У каждого div свой Ajax, который вызывает свой файл .html с контентом.

За решение этой задачи предлагаю 500 руб., после выполнения задания, на карту банка в РФ, или на yoomoney.ru.

Заранее, спасибо, откликнувшимся!

Последний раз редактировалось Vaska, 29.04.2022 в 21:52.
Ответить с цитированием