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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!