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

Replace native lazyloading with verlok/lazyload

master
Pablo Moyano 7 months ago
parent
f2061a7b2a
commit
879c61d2d9
2 changed files with 91 additions and 82 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +85
    -82
      index.html
  2. +6
    -0
      js/main.js

+ 85
- 82
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
- 0
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