Last active
March 28, 2019 03:10
-
-
Save DoonDoony/d5acad3b2b6723daca97454d8b56b4ed to your computer and use it in GitHub Desktop.
Implement 'Infinite Scrolling' with Intersection Observer API with "Cats"!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" | |
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Infinite Scrolling 🤞</title> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"> | |
<style> | |
* { | |
box-sizing: border-box; | |
list-style: none; | |
} | |
.title { | |
font-size: 24px; | |
font-family: "Tahoma", sans-serif; | |
text-align: center; | |
margin-top: 20px; | |
font-weight: bold; | |
} | |
ul.infinite-container { | |
display: block; | |
width: 500px; | |
margin: 0 auto; | |
} | |
li.cat { | |
width: 300px; | |
height: 300px; | |
margin: 20px auto 0; | |
} | |
img { | |
display: inline-block; | |
width: 300px; | |
height: 300px; | |
object-fit: cover; | |
} | |
</style> | |
</head> | |
<body> | |
<h1 class="title">Obey the cats 🐈</h1> | |
<ul class="infinite-container"></ul> | |
<script type="application/javascript"> | |
const container = document.querySelector('ul.infinite-container'); | |
const lastChild = () => document.querySelector('ul > li:last-child'); | |
let currentLast = null; | |
const createNewCats = (numberOfCats=10) => { | |
const acc = []; | |
const createNewCat = () => { | |
const $li = document.createElement('li'); | |
$li.className = 'cat'; | |
const $img = document.createElement('img'); | |
$li.appendChild($img); | |
$img.src = `https://source.unsplash.com/featured/?cat?t=${Math.random()}`; | |
$img.alt = 'cat'; | |
return $li | |
}; | |
for (let i = 0; i < numberOfCats; i++) { | |
acc.push(createNewCat()) | |
} | |
return acc; | |
}; | |
const loadingNewCats = (newCats) => { | |
const loadingTemplate = `<li class="cat loading"><span>Loading New Cats...</span></li>`; | |
return new Promise((resolve, reject) => { | |
container.insertAdjacentHTML('beforeend', loadingTemplate); | |
setTimeout(() => { | |
resolve(newCats); | |
container.removeChild(container.lastChild); | |
}, 1000) | |
}) | |
}; | |
const handleInfiniteScrolling = (entries, observer) => { | |
const $last = [...entries].pop(); | |
if ($last.isIntersecting) { | |
loadingNewCats(createNewCats()).then(newCats => { | |
container.append(...newCats); | |
currentLast = lastChild(); | |
observer.unobserve($last.target); | |
observer.observe(currentLast); | |
}); | |
} | |
}; | |
const ioOptions = { | |
root: null, | |
threshold: 1, | |
}; | |
const io = new IntersectionObserver(handleInfiniteScrolling, ioOptions); | |
container.append(...createNewCats()); | |
io.observe(lastChild()); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment