observer = new IntersectionObserver if iframe in sichtbereich
Testen ob ein Element im Sichtbaren Bereich ist oder nur zur hälfte
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<style>
*{
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;
min-height:4500px;
}
nav{
height:100px;
width:100%;
font-size:50px;
text-align:center;
border:2px solid black;
}
main{
font-size:20px;
text-align:center;
display:flex;
flex-direction:column;
min-height:4500px;
justify-content: space-around;
}
iframe{
border:2px solid black;
width:80%;
margin:0 auto;
text-align:center;
height:500px;
}
.info{
position:fixed;
top:0;
left:0;
height:150px;
width:100%;
background:black;
color:white;
}
table{
width:100%;
border:1px solid white;
border-collapse:collapse;
}
table,th,td{
border:1px solid white;
font-size:12px;
height:calc(130px / 6);
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
<nav>
NAVIGATION
</nav>
<main>
<div class="info" id="info">
<table>
<tr><th>Iframe </th><th>Sichtbar</th><th>Geladen</th><th>Webseite</th></tr>
<tbody id="infot">
</tbody>
</table>
</div>
<iframe data-link="https://php-support.de/main.php" data-sicht="gar nicht" data-load="no" src=""></iframe>
<iframe data-link="https://www.php-resource.de/forum/" data-sicht="gar nicht" data-load="no" src=""></iframe>
<iframe data-link="https://basti1012.bplaced.net/katakomben/index.php" data-sicht="gar nicht" data-load="no" src=""></iframe>
<iframe data-link="https://basti1012.bplaced.net" data-sicht="gar nicht" data-load="no" src=""></iframe>
<iframe data-link="https://soforthilfe-forum.de" data-sicht="gar nicht" data-load="no" src=""></iframe>
</main>
</body>
<script>
/*
ele_inf.innerHTML+=`<tr><td>${index}</td><td>${h.getAttribute('data-sicht')}</td><td>${h.getAttribute('data-load')}</td><td>${h.getAttribute('src')}</tr>`;
if (h[0].intersectionRatio <= 0) {
h.setAttribute('data-sicht','gar nicht');
return;
}
// loadItems(10);
if(h.getAttribute('data-load')=='no'){
h.setAttribute('data-load','ladend');
h.setAttribute('src',h.setAttribute('data-link'));
h.setAttribute('data-sicht','ganz');
}else{
h.setAttribute('data-sicht','ganz');
h.setAttribute('data-load','yes');
}
if(h.getAttribute('data-load')=='ladend'){
h.addEventListener('load',function(){
h.setAttribute('data-load','fertig geladen');
})
}
});
document.querySelectorAll('iframe').forEach((section) => {
observer.observe(section);
});
*/
window.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
link=entry.target.attributes[0].nodeValue;
if (entry.intersectionRatio > 0) {
entry.target.attributes[3].nodeValue=link;
entry.target.attributes[2].nodeValue='loaded';
entry.target.attributes[1].nodeValue='ganz';
} else {
entry.target.attributes[2].nodeValue='yes';
entry.target.attributes[1].nodeValue='gar nicht';
}
console.log(entry)
if(entry.target.attributes[2]=='loaded'){
if(entry.target.onloaf){
entry.target.attributes[2].nodeValue='fertig geladen';
}
}
});
});
// Track all sections that have an `id` applied
document.querySelectorAll('iframe').forEach((section) => {
observer.observe(section);
});
ele_inf=document.getElementById('infot');
ele=document.querySelectorAll('iframe')
window.addEventListener('scroll',function(){
ele_inf.innerHTML='';
ele.forEach(function(h,index){
ele_inf.innerHTML+=`<tr><td>${index}</td><td>${h.getAttribute('data-sicht')}</td><td>${h.getAttribute('data-load')}</td><td>${h.getAttribute('src')}</tr>`;
})
})
});
</script>
</html>