Beim Scrollen nachladen
Hallo
ich habe auf einer Webseite mehrere iFrames die nebeneinander (per Flex) oder auch untereinander (je nach Bildschirmgröße) angezeigt werden. Wie kann ich erreichen, dass beim Öffnen der Seite nicht alle iFrames geladen werden, sondern erst beim Scrollen nach und nach.
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<script src="/js_webseite/jquery.js"></script>
<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>
</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-links="https://php-support.de/main.php" data-sicht="gar nicht" data-load="no" src=""></iframe>
<iframe data-links="https://entwickler-forum.de" data-sicht="gar nicht" data-load="no" src=""></iframe>
<iframe data-links="https://www.php-resource.de/forum/" data-sicht="gar nicht" data-load="no" src=""></iframe>
<iframe data-links="https://basti1012.bplaced.net/katakomben/index.php" data-sicht="gar nicht" data-load="no" src=""></iframe>
<iframe data-links="https://basti1012.bplaced.net" data-sicht="gar nicht" data-load="no" src=""></iframe>
</main>
<script>
function isElementPartiallyInViewport(el){
if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];
var rect = el.getBoundingClientRect();
var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
var vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
return (vertInView)
}
function isElementInViewport (el) {
if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];
var rect = el.getBoundingClientRect();
var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
return ( (rect.top >= 0)
&& ((rect.top + rect.height) <= windowHeight)
);
}
var ele_inf=document.getElementById('infot');
window.addEventListener('scroll',function(){
let ele=document.querySelectorAll('main iframe');
ele_inf.innerHTML='';
ele.forEach(function(h,index){
var inVpFull = isElementInViewport(h);
var inVpPartial = isElementPartiallyInViewport(h);
if(inVpPartial==true){
if(inVpFull==true){
if(h.getAttribute('data-load')=='no'){
h.setAttribute('data-load','ladend');
h.setAttribute('src',h.getAttribute('data-links'));
h.setAttribute('data-sicht','ganz');
}else{
h.setAttribute('data-sicht','ganz');
h.setAttribute('data-load','yes');
}
}else{
h.setAttribute('data-sicht','halb');
}
}else{
h.setAttribute('data-sicht','gar nicht');
}
if(h.getAttribute('data-load')=='ladend'){
ele[index].addEventListener('load',function(){
h.setAttribute('data-load','fertig geladen');
})
}
ele_inf.innerHTML+=`<tr><td>${(index+1)}</td>
<td>${h.getAttribute('data-sicht')}</td>
<td>${h.getAttribute('data-load')}</td>
<td>${h.getAttribute('src')}</tr>`;
})
})
</script>
</body>
</html>