30.04.2022, 21:45
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Vaska,
вариант если ещё блоки с url добавляются к исходным.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
header {
background: cyan;
min-height: 100px;
}
.content_container {
background: rgba(255, 0, 0, 0.3);
padding: 20px;
}
.inner-content {
height: 400px;
margin: 5px;
background: red;
overflow: scroll;
}
footer {
background: cyan;
min-height: 500px;
}
</style>
<title></title>
</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" data-url="/first.html"></div>
<div id="content_b" class="inner-content" data-url="/second.html"></div>
<div id="content_c" class="inner-content" data-url="/third.html"></div>
<div id="content_d" class="inner-content" data-url="/fourth.html"></div>
</div>
</div>
</div>
<footer>
<p>footer content</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const lazyShow = divs => {
divs.forEach(e => {
if (e.intersectionRatio < .3) return;
let div = e.target,
url = div.dataset.url;
$(div).load(url);
observer.unobserve(div);
});
};
let observer = new IntersectionObserver(lazyShow, {
rootMargin: "10px",
threshold: [.3]
});
let parent = document.querySelector('#haupt');
const add = () => parent.querySelectorAll('.inner-content:not(.load)').forEach(div => {
observer.observe(div);
div.classList.add('load');
});
add();
let listObserver = new MutationObserver(add); //отслеживание появления новых блоков .inner-content в #haupt
listObserver.observe(parent, { childList: true, subtree: true});
});
</script>
</body>
</html>
|
|
30.04.2022, 22:12
|
|
Профессор
|
|
Регистрация: 08.05.2017
Сообщений: 178
|
|
Сообщение от рони
|
Vaska,
вариант если ещё блоки с url добавляются к исходным.
|
Если ещё блоки с url добавляются к исходным в пределах #haupt или за его пределами?
Можете подробней объяснить логику последнего варианта? |
|
30.04.2022, 22:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Сообщение от Vaska
|
|
в пределах #haupt
|
типа
document.querySelector('#haupt .content_container').insertAdjacentHTML('beforeend', '<div id="content_e" class="inner-content" data-url="/six.html"></div>');
|
|
30.04.2022, 22:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Vaska,
в нормальном случае, что добавляет блок, то и должно ставить блок на обработку, но можно использовать "сторожа" который добавленный блок, самостоятельно поставит в очередь(слежение,видно на экране, грузить контент или рано) на обработку.
|
|
30.04.2022, 23:14
|
|
Профессор
|
|
Регистрация: 08.05.2017
Сообщений: 178
|
|
рони,
я так и не понял преимущества отслеживать блок отдельно.
Я добавил на страницу , в футер, в теги <script>
document.querySelector('#haupt .content_container').insertAdjacentHTML('beforeend', '<div id="content_e" class="inner-content" data-url="/six.html"></div>');
На странице, этот блок разместился вторым блоком, по счёту, в пределах ('#haupt .content_container'). У первого блока нет в классе inner-content.
Всем классам, у кого есть inner-content, добавился класс load. И новому блоку тоже, при первой загрузке страницы. Что это даёт, ведь уже есть класс inner-content.
При достижении нижней части ('#haupt .content_container'), этот второй блок подгрузился.
Это же не контролируемый вывод блока в области ('#haupt .content_container').
Я точно не понимаю задумки и где можно применить эту фичу.
Было бы хорошо на примерах объяснить где применять.
|
|
01.05.2022, 00:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Vaska,
забей, я пытался угадать, что-бы это значило
|
Сообщение от Vaska
|
|
$(document).on('DOMNodeInserted', '#haupt', function() {
|
|
|
01.05.2022, 00:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Vaska,
пример использования, нажмакать любое количество блоков, во все блоки и созданные далее, будет грузиться контент, как только блок появится на экране.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
header {
background: cyan;
min-height: 100px;
}
.content_container {
background: rgba(255, 0, 0, 0.3);
padding: 20px;
}
.inner-content {
height: 400px;
margin: 5px;
background: red;
overflow: scroll;
background-repeat: no-repeat;
background-size: cover;
}
footer {
background: cyan;
min-height: 500px;
}
</style>
<title></title>
</head>
<body>
<header>
<div>
other content
</div>
<p>text two</p>
<script>
let r = 1;
function addDiv()
{
document.querySelector('#haupt .content_container').insertAdjacentHTML('beforeend', `<div class="inner-content" data-url="https://picsum.photos/300/100?${r++}"></div>`);
}
</script>
<input name="" type="button" value="addDiv" onclick="addDiv()" >
</header>
<div id="haupt">
<div id="acidhaupt" class="haupt-wrap background-color">
<div class="content_container">
</div>
</div>
</div>
<footer>
<p>footer content</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const lazyShow = divs => {
divs.forEach(e => {
if (e.intersectionRatio < .3) return;
let div = e.target,
url = div.dataset.url;
setTimeout(_=> div.style.backgroundImage = `url(${url})`, 600)//имитация грузим контент с сервера
observer.unobserve(div);
});
};
let observer = new IntersectionObserver(lazyShow, {
rootMargin: "10px",
threshold: [.3]
});
let parent = document.querySelector('#haupt');
const add = () => parent.querySelectorAll('.inner-content:not(.load)').forEach(div => {
observer.observe(div);
div.classList.add('load');
});
add();
let listObserver = new MutationObserver(add); //отслеживание появления новых блоков .inner-content в #haupt
listObserver.observe(parent, { childList: true, subtree: true});
});
</script>
</body>
</html>
|
|
01.05.2022, 00:56
|
|
Профессор
|
|
Регистрация: 08.05.2017
Сообщений: 178
|
|
|
Сообщение от рони
|
Vaska,
забей, я пытался угадать, что-бы это значило
|
рони,
Это значит, что переинициализация будет проведена только внутри блока с id="haupt". |
|
01.05.2022, 00:58
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Сообщение от Vaska
|
|
переинициализация будет проведена только внутри блока с id="haupt".
|
не понимаю |
|
01.05.2022, 01:28
|
|
Профессор
|
|
Регистрация: 08.05.2017
Сообщений: 178
|
|
рони,
У меня браузер ругается на кавычки в последнем скрипте.
Uncaught SyntaxError: `` literal not terminated before end of script
А здесь на форме работает.
У меня нет.
Я думаю, что последние две модификации скрипта уже вышли за рамки моей задачи.
Моя задача решена уже здесь https://javascript.ru/forum/545079-post6.html
Последний раз редактировалось Vaska, 01.05.2022 в 01:33.
|
|
|
|
