Skip to content

Instantly share code, notes, and snippets.

@lqs469

lqs469/feed.html

Last active March 11, 2021 17:16
Show Gist options
  • Save lqs469/176b504614c1d6f0215220f9ae09930f to your computer and use it in GitHub Desktop.
Save lqs469/176b504614c1d6f0215220f9ae09930f to your computer and use it in GitHub Desktop.
Download ZIP
feed.html
Raw
feed.html
<!DOCTYPE html>
<style>
body {
margin: 0;
}
iframe {
display: block;
overflow: hidden;
margin: 0 auto;
border: 0;
width: 100%;
max-width: 500px;
background: #ccc;
border-bottom: solid 1px #fff;
}
</style>
<body>
<!-- <img class="post_media_photo image post-media-photo-embedded animated" alt="" width="202" height="281"
src="https://64.media.tumblr.com/a465db7c482ef0330f5c30f19925677a/tumblr_pkci81gQFH1uw2127o1_250.gifv"
data-full-src="https://64.media.tumblr.com/a465db7c482ef0330f5c30f19925677a/tumblr_pkci81gQFH1uw2127o1_250.gifv"
data-pin-url="https://tokisrolis.tumblr.com/post/181427403251"
data-pin-description="+18 only,funny pics and gifs"> -->
<div id="root"></div>
<script>
const resourceList = [
"https://embed.tumblr.com/embed/post/NnGyJcm80qsO3TsggMWyhA/645202034176458752",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/181427403251",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/173647517536",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/170531621651",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/168631667801",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/167663059246",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/167599007586",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/167565558211",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/166987992821",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/166083873736",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/153230561551",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/151479017796",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/150506543666",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/150505290651",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/150505021576",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/150362236221",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/150246026556",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/121612467536",
"https://embed.tumblr.com/embed/post/3SJqH8-WMY4E-hkMX0Ooag/121099901186",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/645138606290337792",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/645035180951764992",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/645009259930812416",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/644996314526105601",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/644970391253794816",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/644957412290379776",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/644944482418163712",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/644931636162641920",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/643132638205476864",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/643119668787281920",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/643119668787281920",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/643093759478857728",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/643055000124260352",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/643042030584463360",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/643003150686650368",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642964392759246850",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642951340389171200",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642938478612660225",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642873699301720064",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642860843964497920",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642847875429171200",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642834931573227520",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642821958205112320",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642783206501990400",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642757302133358592",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642757302133358592",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642731363512025088",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642705445806637056",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642692494755299329",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642666695792672768",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642653764646486016",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642640771469705216",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642601890378661888",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642563266837708800",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642524254423891968",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642498469528993792",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642485495148969984",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642472531635437568",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642420718201716736",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642407866038403072",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642343053273759744",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642304299749310464",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642291348742029313",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642187816360624129",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/642123033897746432",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/641514862422409216",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/641488932471717888",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/641255916262522880",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/641243054611824641",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/641191207026982912",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/641139507259998208",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/641074704739926016",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/641061867993890816",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/641022998751608832",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/641010017664974848",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640984099039985664",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640958303031181313",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640945341023289345",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640932380048244736",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640919421750214656",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640893499875737600",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640867709112958976",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640854743190781952",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640841805483655168",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640802907310178304",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640764154851049472",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640738235428012032",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640712308846362624",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640699479277879296",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640686556333686785",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640647633995694080",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640621768549285888",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640608759984668674",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640582971266662400",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640569993693724673",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640531108728127488",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640518273351532545",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640505323718934528",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640440516304109569",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640427688581087232",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640401767836876800",
"https://embed.tumblr.com/embed/post/HbO5aojdqplWy-O-zIT3Gw/640388804948230144"
];
const root = document.getElementById('root');
const itemHeightPercent = 0.3;
const itemHeight = innerHeight * itemHeightPercent;
const initailCount = Math.ceil(1 / itemHeightPercent);
const renderThreshold = 20;
let count = 0;
const renderedElements = [];
const renderImg = (index) => {
if (!resourceList[index]) {
return;
}
const iframe = document.createElement('iframe');
iframe.style.height = `${itemHeightPercent * 100}vh`;
iframe.src = resourceList[index];
root.appendChild(iframe);
renderedElements.push(iframe);
}
for (; count < initailCount; count++) {
renderImg(count);
}
const scrollDebouncedFn = debounce(() => {
if (scrollY + innerHeight + renderThreshold >= document.body.scrollHeight) {
count++;
renderImg(count);
}
const elementsInViewport = [];
for (let i = 0; i < renderedElements.length; i++) {
if (isInViewport(renderedElements[i])) {
elementsInViewport.push(renderedElements[i]);
};
}
console.log(elementsInViewport);
}, 50);
document.addEventListener('scroll', scrollDebouncedFn);
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function debounce(func, wait, immediate) {
var timeout;
return function () {
const context = this;
const args = arguments;
const later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment