fosc/fosc.space
1
0
Fork 0
Code Issues Releases Activity

Replace old lazyload library for native lazy loading

Browse Source
This commit is contained in:
Pablo Moyano 2020-03-13 22:42:54 +01:00
parent 32cb4f21f7
commit f2061a7b2a
2 changed files with 52 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
index.html
View File

@ -32,10 +32,10 @@
<section class="navigation"> <section class="navigation">
<div class="nav-container"> <div class="nav-container">
<div class="brand"> <div class="brand">
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/Logo-invert.webp"> <source type="image/webp" srcset="img/Logo-invert.webp">
<source type="image/png" srcset="img/Logo-invert.png"> <source type="image/png" srcset="img/Logo-invert.png">
<img data-src="img/Logo-invert.png" style="width: 100px;"> <img loading="lazy" src="img/Logo-invert.png" style="width: 100px;">
</picture> </picture>
</div> </div>
<nav> <nav>
@ -127,104 +127,104 @@
<div class="bgallery"> <div class="bgallery">
<div class="gallery"> <div class="gallery">
<div class="column-gallery"> <div class="column-gallery">
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/junction2018.webp"> <source type="image/webp" srcset="img/junction2018.webp">
<source type="image/jpeg" srcset="img/junction2018.jpg"> <source type="image/jpeg" srcset="img/junction2018.jpg">
<img data-src="img/junction2018.jpg"> <img loading="lazy" src="img/junction2018.jpg">
</picture> </picture>
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/santi.webp"> <source type="image/webp" srcset="img/santi.webp">
<source type="image/jpeg" srcset="img/santi.jpg"> <source type="image/jpeg" srcset="img/santi.jpg">
<img data-src="img/santi.jpg"> <img loading="lazy" loading="lazy" src="img/santi.jpg">
</picture> </picture>
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/kids.webp"> <source type="image/webp" srcset="img/kids.webp">
<source type="image/jpeg" srcset="img/kids.jpg"> <source type="image/jpeg" srcset="img/kids.jpg">
<img data-src="img/kids.jpg"> <img loading="lazy" src="img/kids.jpg">
</picture> </picture>
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/sec.webp"> <source type="image/webp" srcset="img/sec.webp">
<source type="image/jpeg" srcset="img/sec.jpg"> <source type="image/jpeg" srcset="img/sec.jpg">
<img data-src="img/sec.jpg"> <img loading="lazy" src="img/sec.jpg">
</picture> </picture>
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/junction2018-1.webp"> <source type="image/webp" srcset="img/junction2018-1.webp">
<source type="image/jpeg" srcset="img/junction2018-1.jpg"> <source type="image/jpeg" srcset="img/junction2018-1.jpg">
<img data-src="img/junction2018-1.jpg"> <img loading="lazy" src="img/junction2018-1.jpg">
</picture> </picture>
</div> </div>
<div class="column-gallery"> <div class="column-gallery">
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/app.webp"> <source type="image/webp" srcset="img/app.webp">
<source type="image/jpeg" srcset="img/app.jpg"> <source type="image/jpeg" srcset="img/app.jpg">
<img data-src="img/app.jpg"> <img loading="lazy" src="img/app.jpg">
</picture> </picture>
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/bitup.webp"> <source type="image/webp" srcset="img/bitup.webp">
<source type="image/jpeg" srcset="img/bitup.jpg"> <source type="image/jpeg" srcset="img/bitup.jpg">
<img data-src="img/bitup.jpg"> <img loading="lazy" src="img/bitup.jpg">
</picture> </picture>
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/soldadura.webp"> <source type="image/webp" srcset="img/soldadura.webp">
<source type="image/jpeg" srcset="img/soldadura.jpg"> <source type="image/jpeg" srcset="img/soldadura.jpg">
<img data-src="img/soldadura.jpg"> <img loading="lazy" src="img/soldadura.jpg">
</picture> </picture>
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/hacking.webp"> <source type="image/webp" srcset="img/hacking.webp">
<source type="image/jpeg" srcset="img/hacking.jpg"> <source type="image/jpeg" srcset="img/hacking.jpg">
<img data-src="img/hacking.jpg"> <img loading="lazy" src="img/hacking.jpg">
</picture> </picture>
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/junction2019-1.webp"> <source type="image/webp" srcset="img/junction2019-1.webp">
<source type="image/jpeg" srcset="img/junction2019-1.jpg"> <source type="image/jpeg" srcset="img/junction2019-1.jpg">
<img data-src="img/junction2019-1.jpg"> <img loading="lazy" src="img/junction2019-1.jpg">
</picture> </picture>
</div> </div>
<div class="column-gallery"> <div class="column-gallery">
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/pepemod.webp"> <source type="image/webp" srcset="img/pepemod.webp">
<source type="image/jpeg" srcset="img/pepemod.jpg"> <source type="image/jpeg" srcset="img/pepemod.jpg">
<img data-src="img/pepemod.jpg"> <img loading="lazy" src="img/pepemod.jpg">
</picture> </picture>
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/atresmedia.webp"> <source type="image/webp" srcset="img/atresmedia.webp">
<source type="image/jpeg" srcset="img/atresmedia.jpg"> <source type="image/jpeg" srcset="img/atresmedia.jpg">
<img data-src="img/atresmedia.jpg"> <img loading="lazy" src="img/atresmedia.jpg">
</picture> </picture>
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/junction2019.webp"> <source type="image/webp" srcset="img/junction2019.webp">
<source type="image/jpeg" srcset="img/junction2019.jpg"> <source type="image/jpeg" srcset="img/junction2019.jpg">
<img data-src="img/junction2019.jpg"> <img loading="lazy" src="img/junction2019.jpg">
</picture> </picture>
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/printer3d.webp"> <source type="image/webp" srcset="img/printer3d.webp">
<source type="image/jpeg" srcset="img/printer3d.jpg"> <source type="image/jpeg" srcset="img/printer3d.jpg">
<img data-src="img/printer3d-1.jpg"> <img loading="lazy" src="img/printer3d-1.jpg">
</picture> </picture>
</div> </div>
<div class="column-gallery"> <div class="column-gallery">
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/flp1.webp"> <source type="image/webp" srcset="img/flp1.webp">
<source type="image/jpeg" srcset="img/flp1.jpg"> <source type="image/jpeg" srcset="img/flp1.jpg">
<img data-src="img/flp1.jpg"> <img loading="lazy" src="img/flp1.jpg">
</picture> </picture>
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/soldadura1.webp"> <source type="image/webp" srcset="img/soldadura1.webp">
<source type="image/jpeg" srcset="img/soldadura1.jpg"> <source type="image/jpeg" srcset="img/soldadura1.jpg">
<img data-src="img/soldadura1.jpg"> <img loading="lazy" src="img/soldadura1.jpg">
</picture> </picture>
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/nn1.webp"> <source type="image/webp" srcset="img/nn1.webp">
<source type="image/jpeg" srcset="img/nn1.jpg"> <source type="image/jpeg" srcset="img/nn1.jpg">
<img data-src="img/nn1.jpg"> <img loading="lazy" src="img/nn1.jpg">
</picture> </picture>
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/fosc2.webp"> <source type="image/webp" srcset="img/fosc2.webp">
<source type="image/jpeg" srcset="img/fosc2.jpg"> <source type="image/jpeg" srcset="img/fosc2.jpg">
<img data-src="img/fosc2-1.jpg"> <img loading="lazy" src="img/fosc2-1.jpg">
</picture> </picture>
</div> </div>
</div> </div>
@ -243,10 +243,10 @@
<div class="tabla"> <div class="tabla">
<div class="column"> <div class="column">
<a href="https://cloud.fosc.space"> <a href="https://cloud.fosc.space">
<picture class="lazy"> <picture>
<source type="image/webp" srcset="icons/cloud-computing.webp"> <source type="image/webp" srcset="icons/cloud-computing.webp">
<source type="image/png" srcset="icons/cloud-computing.png"> <source type="image/png" srcset="icons/cloud-computing.png">
<img data-src="icons/cloud-computing.png" alt="Cloud"> <img loading="lazy" src="icons/cloud-computing.png" alt="Cloud">
</picture> </picture>
</a> </a>
<h4>Cloud</h4> <h4>Cloud</h4>
@ -254,10 +254,10 @@
<div class="column"> <div class="column">
<a href="https://doc.fosc.space"> <a href="https://doc.fosc.space">
<picture class="lazy"> <picture>
<source type="image/webp" srcset="icons/book.webp"> <source type="image/webp" srcset="icons/book.webp">
<source type="image/png" srcset="icons/book.png"> <source type="image/png" srcset="icons/book.png">
<img data-src="icons/book.png" alt="Wiki"> <img loading="lazy" src="icons/book.png" alt="Wiki">
</picture> </picture>
</a> </a>
<h4>Wiki</h4> <h4>Wiki</h4>
@ -265,10 +265,10 @@
<div class="column"> <div class="column">
<a href="https://rss.fosc.space"> <a href="https://rss.fosc.space">
<picture class="lazy"> <picture>
<source type="image/webp" srcset="icons/rss2.webp"> <source type="image/webp" srcset="icons/rss2.webp">
<source type="image/png" srcset="icons/rss2.png"> <source type="image/png" srcset="icons/rss2.png">
<img data-src="icons/rss2.png" alt="RSS"> <img loading="lazy" src="icons/rss2.png" alt="RSS">
</picture> </picture>
</a> </a>
<h4>RSS</h4> <h4>RSS</h4>
@ -278,10 +278,10 @@
<div class="tabla tabla2"> <div class="tabla tabla2">
<div class="column"> <div class="column">
<a href="https://netdata.fosc.space"> <a href="https://netdata.fosc.space">
<picture class="lazy"> <picture>
<source type="image/webp" srcset="icons/chart.webp"> <source type="image/webp" srcset="icons/chart.webp">
<source type="image/png" srcset="icons/chart.png"> <source type="image/png" srcset="icons/chart.png">
<img data-src="icons/chart.png" alt="NetData"> <img loading="lazy" src="icons/chart.png" alt="NetData">
</picture> </picture>
</a> </a>
<h4>NetData</h4> <h4>NetData</h4>
@ -289,10 +289,10 @@
<div class="column"> <div class="column">
<a href="https://analytics.fosc.space"> <a href="https://analytics.fosc.space">
<picture class="lazy"> <picture>
<source type="image/webp" srcset="icons/analytics.webp"> <source type="image/webp" srcset="icons/analytics.webp">
<source type="image/png" srcset="icons/analytics.png"> <source type="image/png" srcset="icons/analytics.png">
<img data-src="icons/analytics.png" alt="Analytics"> <img loading="lazy" src="icons/analytics.png" alt="Analytics">
</picture> </picture>
</a> </a>
<h4>Analytics</h4> <h4>Analytics</h4>
@ -300,10 +300,10 @@
<div class="column"> <div class="column">
<a href="https://git.fosc.space"> <a href="https://git.fosc.space">
<picture class="lazy"> <picture>
<source type="image/webp" srcset="icons/gitea.webp"> <source type="image/webp" srcset="icons/gitea.webp">
<source type="image/png" srcset="icons/gitea.png"> <source type="image/png" srcset="icons/gitea.png">
<img data-src="icons/gitea.png" alt="Gitea"> <img loading="lazy" src="icons/gitea.png" alt="Gitea">
</picture> </picture>
</a> </a>
<h4>Stolen Code</h4> <h4>Stolen Code</h4>
@ -347,10 +347,10 @@
<footer> <footer>
<hr> <hr>
<div class="foot-logo"> <div class="foot-logo">
<picture class="lazy"> <picture>
<source type="image/webp" srcset="img/Logo-invert.webp"> <source type="image/webp" srcset="img/Logo-invert.webp">
<source type="image/png" srcset="img/Logo-invert.png"> <source type="image/png" srcset="img/Logo-invert.png">
<img data-src="img/Logo-invert.png"> <img loading="lazy" src="img/Logo-invert.png">
</picture> </picture>
<a href="https://git.fosc.space/fosc/fosc.space">WEBSITE SOURCE CODE</a> <a href="https://git.fosc.space/fosc/fosc.space">WEBSITE SOURCE CODE</a>
<div class="author"> <div class="author">

50
js/main.js
View File

@ -2,53 +2,3 @@ function loadMap() {
var site = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1580.5054989176758!2d-0.9796837724532329!3d37.60190018337746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6341863c83cf8f%3A0xe24278be476b56b8!2sFOSC!5e0!3m2!1ses!2ses!4v1544058887076"; var site = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1580.5054989176758!2d-0.9796837724532329!3d37.60190018337746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6341863c83cf8f%3A0xe24278be476b56b8!2sFOSC!5e0!3m2!1ses!2ses!4v1544058887076";
document.getElementById('map').src = site; document.getElementById('map').src = site;
} }
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages;
if ("IntersectionObserver" in window) {
lazyloadImages = document.querySelectorAll(".lazy");
var imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var image = entry.target;
image.src = image.dataset.src;
image.classList.remove("lazy");
imageObserver.unobserve(image);
}
});
});
lazyloadImages.forEach(function(image) {
imageObserver.observe(image);
});
} else {
var lazyloadThrottleTimeout;
lazyloadImages = document.querySelectorAll(".lazy");
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
}
})