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

Replace native lazyloading with verlok/lazyload

master
Pablo Moyano 12 months ago
parent
f2061a7b2a
commit
879c61d2d9
2 changed files with 91 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 167
      index.html
  2. 6
      js/main.js

167
index.html
View File

@ -13,7 +13,9 @@
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FOSC - Free Open Source Club</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="FOSC, Hackerspace from Cartagena">
<meta name="keywords" content="Open Source, Free Software, Linux, Hackerspace, Foss">
<meta name="author" content="FOSC">
@ -22,10 +24,11 @@
<link rel="icon" href="img/Logo-invert.png" type="image/gif">
<link rel="stylesheet" type="text/css" href="cs.css">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<title>FOSC - Free Open Source Club</title>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="js/main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@13.0.1/dist/lazyload.min.js"></script>
</head>
<header>
@ -33,9 +36,9 @@
<div class="nav-container">
<div class="brand">
<picture>
<source type="image/webp" srcset="img/Logo-invert.webp">
<source type="image/png" srcset="img/Logo-invert.png">
<img loading="lazy" src="img/Logo-invert.png" style="width: 100px;">
<source type="image/webp" data-srcset="img/Logo-invert.webp">
<source type="image/png" data-srcset="img/Logo-invert.png">
<img class="lazy" data-src="img/Logo-invert.png" style="width: 100px;">
</picture>
</div>
<nav>
@ -128,103 +131,103 @@
<div class="gallery">
<div class="column-gallery">
<picture>
<source type="image/webp" srcset="img/junction2018.webp">
<source type="image/jpeg" srcset="img/junction2018.jpg">
<img loading="lazy" src="img/junction2018.jpg">
<source type="image/webp" data-srcset="img/junction2018.webp">
<source type="image/jpeg" data-srcset="img/junction2018.jpg">
<img class="lazy" data-src="img/junction2018.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/santi.webp">
<source type="image/jpeg" srcset="img/santi.jpg">
<img loading="lazy" loading="lazy" src="img/santi.jpg">
<source type="image/webp" data-srcset="img/santi.webp">
<source type="image/jpeg" data-srcset="img/santi.jpg">
<img class="lazy" data-src="img/santi.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/kids.webp">
<source type="image/jpeg" srcset="img/kids.jpg">
<img loading="lazy" src="img/kids.jpg">
<source type="image/webp" data-srcset="img/kids.webp">
<source type="image/jpeg" data-srcset="img/kids.jpg">
<img class="lazy" data-src="img/kids.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/sec.webp">
<source type="image/jpeg" srcset="img/sec.jpg">
<img loading="lazy" src="img/sec.jpg">
<source type="image/webp" data-srcset="img/sec.webp">
<source type="image/jpeg" data-srcset="img/sec.jpg">
<img class="lazy" data-src="img/sec.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/junction2018-1.webp">
<source type="image/jpeg" srcset="img/junction2018-1.jpg">
<img loading="lazy" src="img/junction2018-1.jpg">
<source type="image/webp" data-srcset="img/junction2018-1.webp">
<source type="image/jpeg" data-srcset="img/junction2018-1.jpg">
<img class="lazy" data-src="img/junction2018-1.jpg">
</picture>
</div>
<div class="column-gallery">
<picture>
<source type="image/webp" srcset="img/app.webp">
<source type="image/jpeg" srcset="img/app.jpg">
<img loading="lazy" src="img/app.jpg">
<source type="image/webp" data-srcset="img/app.webp">
<source type="image/jpeg" data-srcset="img/app.jpg">
<img class="lazy" data-src="img/app.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/bitup.webp">
<source type="image/jpeg" srcset="img/bitup.jpg">
<img loading="lazy" src="img/bitup.jpg">
<source type="image/webp" data-srcset="img/bitup.webp">
<source type="image/jpeg" data-srcset="img/bitup.jpg">
<img class="lazy" data-src="img/bitup.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/soldadura.webp">
<source type="image/jpeg" srcset="img/soldadura.jpg">
<img loading="lazy" src="img/soldadura.jpg">
<source type="image/webp" data-srcset="img/soldadura.webp">
<source type="image/jpeg" data-srcset="img/soldadura.jpg">
<img class="lazy" data-src="img/soldadura.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/hacking.webp">
<source type="image/jpeg" srcset="img/hacking.jpg">
<img loading="lazy" src="img/hacking.jpg">
<source type="image/webp" data-srcset="img/hacking.webp">
<source type="image/jpeg" data-srcset="img/hacking.jpg">
<img class="lazy" data-src="img/hacking.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/junction2019-1.webp">
<source type="image/jpeg" srcset="img/junction2019-1.jpg">
<img loading="lazy" src="img/junction2019-1.jpg">
<source type="image/webp" data-srcset="img/junction2019-1.webp">
<source type="image/jpeg" data-srcset="img/junction2019-1.jpg">
<img class="lazy" data-src="img/junction2019-1.jpg">
</picture>
</div>
<div class="column-gallery">
<picture>
<source type="image/webp" srcset="img/pepemod.webp">
<source type="image/jpeg" srcset="img/pepemod.jpg">
<img loading="lazy" src="img/pepemod.jpg">
<source type="image/webp" data-srcset="img/pepemod.webp">
<source type="image/jpeg" data-srcset="img/pepemod.jpg">
<img class="lazy" data-src="img/pepemod.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/atresmedia.webp">
<source type="image/jpeg" srcset="img/atresmedia.jpg">
<img loading="lazy" src="img/atresmedia.jpg">
<source type="image/webp" data-srcset="img/atresmedia.webp">
<source type="image/jpeg" data-srcset="img/atresmedia.jpg">
<img class="lazy" data-src="img/atresmedia.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/junction2019.webp">
<source type="image/jpeg" srcset="img/junction2019.jpg">
<img loading="lazy" src="img/junction2019.jpg">
<source type="image/webp" data-srcset="img/junction2019.webp">
<source type="image/jpeg" data-srcset="img/junction2019.jpg">
<img class="lazy" data-src="img/junction2019.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/printer3d.webp">
<source type="image/jpeg" srcset="img/printer3d.jpg">
<img loading="lazy" src="img/printer3d-1.jpg">
<source type="image/webp" data-srcset="img/printer3d.webp">
<source type="image/jpeg" data-srcset="img/printer3d.jpg">
<img class="lazy" data-src="img/printer3d-1.jpg">
</picture>
</div>
<div class="column-gallery">
<picture>
<source type="image/webp" srcset="img/flp1.webp">
<source type="image/jpeg" srcset="img/flp1.jpg">
<img loading="lazy" src="img/flp1.jpg">
<source type="image/webp" data-srcset="img/flp1.webp">
<source type="image/jpeg" data-srcset="img/flp1.jpg">
<img class="lazy" data-src="img/flp1.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/soldadura1.webp">
<source type="image/jpeg" srcset="img/soldadura1.jpg">
<img loading="lazy" src="img/soldadura1.jpg">
<source type="image/webp" data-srcset="img/soldadura1.webp">
<source type="image/jpeg" data-srcset="img/soldadura1.jpg">
<img class="lazy" data-src="img/soldadura1.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/nn1.webp">
<source type="image/jpeg" srcset="img/nn1.jpg">
<img loading="lazy" src="img/nn1.jpg">
<source type="image/webp" data-srcset="img/nn1.webp">
<source type="image/jpeg" data-srcset="img/nn1.jpg">
<img class="lazy" data-src="img/nn1.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/fosc2.webp">
<source type="image/jpeg" srcset="img/fosc2.jpg">
<img loading="lazy" src="img/fosc2-1.jpg">
<source type="image/webp" data-srcset="img/fosc2.webp">
<source type="image/jpeg" data-srcset="img/fosc2.jpg">
<img class="lazy" data-src="img/fosc2-1.jpg">
</picture>
</div>
</div>
@ -244,9 +247,9 @@
<div class="column">
<a href="https://cloud.fosc.space">
<picture>
<source type="image/webp" srcset="icons/cloud-computing.webp">
<source type="image/png" srcset="icons/cloud-computing.png">
<img loading="lazy" src="icons/cloud-computing.png" alt="Cloud">
<source type="image/webp" data-srcset="icons/cloud-computing.webp">
<source type="image/png" data-srcset="icons/cloud-computing.png">
<img class="lazy" data-src="icons/cloud-computing.png" alt="Cloud">
</picture>
</a>
<h4>Cloud</h4>
@ -255,9 +258,9 @@
<div class="column">
<a href="https://doc.fosc.space">
<picture>
<source type="image/webp" srcset="icons/book.webp">
<source type="image/png" srcset="icons/book.png">
<img loading="lazy" src="icons/book.png" alt="Wiki">
<source type="image/webp" data-srcset="icons/book.webp">
<source type="image/png" data-srcset="icons/book.png">
<img class="lazy" data-src="icons/book.png" alt="Wiki">
</picture>
</a>
<h4>Wiki</h4>
@ -266,9 +269,9 @@
<div class="column">
<a href="https://rss.fosc.space">
<picture>
<source type="image/webp" srcset="icons/rss2.webp">
<source type="image/png" srcset="icons/rss2.png">
<img loading="lazy" src="icons/rss2.png" alt="RSS">
<source type="image/webp" data-srcset="icons/rss2.webp">
<source type="image/png" data-srcset="icons/rss2.png">
<img class="lazy" data-src="icons/rss2.png" alt="RSS">
</picture>
</a>
<h4>RSS</h4>
@ -279,9 +282,9 @@
<div class="column">
<a href="https://netdata.fosc.space">
<picture>
<source type="image/webp" srcset="icons/chart.webp">
<source type="image/png" srcset="icons/chart.png">
<img loading="lazy" src="icons/chart.png" alt="NetData">
<source type="image/webp" data-srcset="icons/chart.webp">
<source type="image/png" data-srcset="icons/chart.png">
<img class="lazy" data-src="icons/chart.png" alt="NetData">
</picture>
</a>
<h4>NetData</h4>
@ -290,9 +293,9 @@
<div class="column">
<a href="https://analytics.fosc.space">
<picture>
<source type="image/webp" srcset="icons/analytics.webp">
<source type="image/png" srcset="icons/analytics.png">
<img loading="lazy" src="icons/analytics.png" alt="Analytics">
<source type="image/webp" data-srcset="icons/analytics.webp">
<source type="image/png" data-srcset="icons/analytics.png">
<img class="lazy" data-src="icons/analytics.png" alt="Analytics">
</picture>
</a>
<h4>Analytics</h4>
@ -301,9 +304,9 @@
<div class="column">
<a href="https://git.fosc.space">
<picture>
<source type="image/webp" srcset="icons/gitea.webp">
<source type="image/png" srcset="icons/gitea.png">
<img loading="lazy" src="icons/gitea.png" alt="Gitea">
<source type="image/webp" data-srcset="icons/gitea.webp">
<source type="image/png" data-srcset="icons/gitea.png">
<img class="lazy" data-src="icons/gitea.png" alt="Gitea">
</picture>
</a>
<h4>Stolen Code</h4>
@ -348,9 +351,9 @@
<hr>
<div class="foot-logo">
<picture>
<source type="image/webp" srcset="img/Logo-invert.webp">
<source type="image/png" srcset="img/Logo-invert.png">
<img loading="lazy" src="img/Logo-invert.png">
<source type="image/webp" data-srcset="img/Logo-invert.webp">
<source type="image/png" data-srcset="img/Logo-invert.png">
<img class="lazy" data-src="img/Logo-invert.png">
</picture>
<a href="https://git.fosc.space/fosc/fosc.space">WEBSITE SOURCE CODE</a>
<div class="author">

6
js/main.js
View File

@ -2,3 +2,9 @@ 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";
document.getElementById('map').src = site;
}
document.addEventListener("DOMContentLoaded", function() {
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy"
});
})
Write Preview
Loading…
Cancel
Save