<html>
<head>
<meta charset="UTF-8" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<title>Intersection Observer API : Demo</title>
<style type="text/css">
body {
margin-top: 200px;
}
#target-container1,#target-container2,#target-container3{
padding: 50px 0 50px
}
#section1,
#section2,
#section3 {
margin: 10px 0 10px
}
</style>
</head>
<body>
<p id="msg1"></p>
<div id="target-container1">
<div id="section1"></div>
</div>
<div id="target-container2">
<div id="section2"></div>
</div>
<div id="target-container3">
<div id="section3"></div>
</div>
<script type="text/javascript">
var observer1 = new IntersectionObserver(function(entries) {
console.log(entries);
if (entries[0]['isIntersecting'] === true) {
if (entries[0]['intersectionRatio'] === 1)
if (!navigator.onLine) {
document.getElementById("msg1").innerHTML = "Tem de efetuar a ligação da sua Internet";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("section1").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "section1.php", true);
xmlhttp.send();
}
}
}, {
threshold: [0, 0.5, 1]
});
observer1.observe(document.querySelector("#target-container1"));
</script>
<script type="text/javascript">
var observer2 = new IntersectionObserver(function(entries) {
console.log(entries);
if (entries[0]['isIntersecting'] === true) {
if (entries[0]['intersectionRatio'] === 1)
if (!navigator.onLine) {
document.getElementById("msg1").innerHTML = "Tem de efetuar a ligação da sua Internet";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("section2").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "section2.php", true);
xmlhttp.send();
}
}
}, {
threshold: [0, 0.5, 1]
});
observer2.observe(document.querySelector("#target-container2"));
</script>
<script type="text/javascript">
var observer3 = new IntersectionObserver(function(entries) {
console.log(entries);
if (entries[0]['isIntersecting'] === true) {
if (entries[0]['intersectionRatio'] === 1)
if (!navigator.onLine) {
document.getElementById("msg1").innerHTML = "Tem de efetuar a ligação da sua Internet";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("section3").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "section3.php", true);
xmlhttp.send();
}
}
}, {
threshold: [0, 0.5, 1]
});
observer3.observe(document.querySelector("#target-container3"));
</script>
</body>
</html>
Sem comentários:
Enviar um comentário