Commit 33eaa51b authored by Lorenzo Faletra's avatar Lorenzo Faletra

lazy-load images to speed up page loading times

parent 7a4a9c90
......@@ -12,7 +12,7 @@
</p>
</div>
<div class="col-lg-6 text-center">
<p><img width="400" src="img/desktop.jpg"/></p>
<p><img width="400" data-src="img/desktop.jpg"/></p>
</div><br/><br/><br/>
</div>
<div class="row">
......
......@@ -12,7 +12,7 @@
</p>
</div>
<div class="col-lg-6 text-center">
<p><img class="rounded mx-auto d-block float-left" style="width:500px" src="img/arm-soc.jpg" /></p>
<p><img class="rounded mx-auto d-block float-left" style="width:500px" data-src="img/arm-soc.jpg" /></p>
</div><br/><br/><br/>
</div>
<div class="row">
......
......@@ -9,7 +9,7 @@
<p class="text-faded wow fadeInRight"><?php echo $lang['download-security-2']; ?></p>
<p class="text-faded wow fadeInUp"><?php echo $lang['download-security-3']; ?></p>
</div>
<div class="col-lg-6 text-center"><p><img width="400px" src="/img/menu-full.jpg"/></p></div>
<div class="col-lg-6 text-center"><p><img width="400px" data-src="/img/menu-full.jpg"/></p></div>
</div><br/><br/><br/>
<div class="row">
......
......@@ -12,7 +12,7 @@
<div class="row">
<div class="col-lg-4 col-md-4 text-center wow fadeInLeft">
<div class="feature">
<img src="img/logo.jpg" width="60" height="60" />
<img data-src="img/logo.jpg" width="60" height="60" />
<h3><?php echo $lang['download-2']; ?></h3>
<p class="text-muted"><?php echo $lang['download-3']; ?></p>
</div>
......@@ -20,7 +20,7 @@
</div>
<div class="col-lg-4 col-md-4 text-center wow fadeInUp">
<div class="feature">
<img src="img/workstation.png" width="60" height="60" />
<img data-src="img/workstation.png" width="60" height="60" />
<h3><?php echo $lang['download-4']; ?></h3>
<p class="text-muted"><?php echo $lang['download-5']; ?></p>
</div>
......@@ -28,7 +28,7 @@
</div>
<div class="col-lg-4 col-md-4 text-center wow fadeInRight">
<div class="feature">
<img src="img/iot.png" width="55" height="55" />
<img data-src="img/iot.png" width="55" height="55" />
<h3><?php echo $lang['download-6']; ?></h3>
<p class="text-muted"><?php echo $lang['download-7']; ?></p>
</div>
......
......@@ -53,5 +53,15 @@
<script src="js/jquery.easing.min.js"></script>
<script src="js/wow.js"></script>
<script src="js/scripts.js"></script>
<script>
window.addEventListener('load', function(){
var allimages= document.getElementsByTagName('img');
for (var i=0; i<allimages.length; i++) {
if (allimages[i].getAttribute('data-src')) {
allimages[i].setAttribute('src', allimages[i].getAttribute('data-src'));
}
}
}, false)
</script>
</body>
</html>
......@@ -39,21 +39,21 @@
<div class="row">
<div class="col-lg-4 col-md-4 text-center">
<div class="feature">
<img src="img/security.png" width="60" height="60" />
<img data-src="img/security.png" width="60" height="60" />
<h3><?php echo $lang['index-10']; ?></h3>
<p class="text-muted"><?php echo $lang['index-11']; ?></p>
</div>
</div>
<div class="col-lg-4 col-md-4 text-center">
<div class="feature">
<img src="img/privacy.png" width="60" height="60" />
<img data-src="img/privacy.png" width="60" height="60" />
<h3><?php echo $lang['index-12']; ?></h3>
<p class="text-muted"><?php echo $lang['index-13']; ?></p>
</div>
</div>
<div class="col-lg-4 col-md-4 text-center">
<div class="feature">
<img src="img/develop.png" width="55" height="55" />
<img data-src="img/develop.png" width="55" height="55" />
<h3><?php echo $lang['index-14']; ?></h3>
<p class="text-muted"><?php echo $lang['index-15']; ?></p>
</div>
......@@ -72,14 +72,14 @@
<p><?php echo $lang['index-18']; ?></p>
</div>
<div class="media-right">
<img src="img/shield.png" width="100" />
<img data-src="img/shield.png" width="100" />
</div>
</div>
<hr>
<div class="media wow fadeInLeft">
<h3><?php echo $lang['index-19']; ?></h3>
<div class="media-left">
<a href="#alertModal" data-toggle="modal" data-target="#alertModal"><img src="img/gpl.png" width="100" /></a>
<a href="#alertModal" data-toggle="modal" data-target="#alertModal"><img data-src="img/gpl.png" width="100" /></a>
</div>
<div class="media-body media-middle">
<p><?php echo $lang['index-20']; ?></p>
......@@ -92,7 +92,7 @@
<p><?php echo $lang['index-22']; ?></p>
</div>
<div class="media-right">
<img src="img/lightweight.png" width="100" />
<img data-src="img/lightweight.png" width="100" />
</div>
</div>
</div>
......@@ -103,7 +103,7 @@
<div class="row no-gutter">
<div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/01.jpg">
<img src="./screenshots/01.jpg" class="img-responsive" alt="Desktop">
<img data-src="./screenshots/01.jpg" class="img-responsive" alt="Desktop">
<div class="gallery-box-caption">
<div class="gallery-box-content">
<div>
......@@ -115,7 +115,7 @@
</div>
<div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/02.jpg">
<img src="./screenshots/02.jpg" class="img-responsive" alt="Tools Menu">
<img data-src="./screenshots/02.jpg" class="img-responsive" alt="Tools Menu">
<div class="gallery-box-caption">
<div class="gallery-box-content">
<div>
......@@ -128,7 +128,7 @@
<div class="clearfix hidden-lg"> </div>
<div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/03.jpg">
<img src="./screenshots/03.jpg" class="img-responsive" alt="Bottom Menu">
<img data-src="./screenshots/03.jpg" class="img-responsive" alt="Bottom Menu">
<div class="gallery-box-caption">
<div class="gallery-box-content">
<div>
......@@ -140,7 +140,7 @@
</div>
<div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/04.jpg">
<img src="./screenshots/04.jpg" class="img-responsive" alt="Tools in action">
<img data-src="./screenshots/04.jpg" class="img-responsive" alt="Tools in action">
<div class="gallery-box-caption">
<div class="gallery-box-content">
<div>
......@@ -153,7 +153,7 @@
<div class="clearfix hidden-lg"> </div>
<div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/05.jpg">
<img src="./screenshots/05.jpg" class="img-responsive" alt="GUI tools">
<img data-src="./screenshots/05.jpg" class="img-responsive" alt="GUI tools">
<div class="gallery-box-caption">
<div class="gallery-box-content">
<div>
......@@ -165,7 +165,7 @@
</div>
<div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/06.jpg">
<img src="./screenshots/06.jpg" class="img-responsive" alt="Secure browsing">
<img data-src="./screenshots/06.jpg" class="img-responsive" alt="Secure browsing">
<div class="gallery-box-caption">
<div class="gallery-box-content">
<div>
......@@ -177,7 +177,7 @@
</div>
<div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/07.jpg">
<img src="./screenshots/07.jpg" class="img-responsive" alt="Secret chats">
<img data-src="./screenshots/07.jpg" class="img-responsive" alt="Secret chats">
<div class="gallery-box-caption">
<div class="gallery-box-content">
<div>
......@@ -190,7 +190,7 @@
<div class="clearfix hidden-lg"> </div>
<div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/08.jpg">
<img src="./screenshots/08.jpg" class="img-responsive" alt="Programming">
<img data-src="./screenshots/08.jpg" class="img-responsive" alt="Programming">
<div class="gallery-box-caption">
<div class="gallery-box-content">
<div>
......@@ -202,7 +202,7 @@
</div>
<div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/09.jpg">
<img src="./screenshots/09.jpg" class="img-responsive" alt="Internet menu">
<img data-src="./screenshots/09.jpg" class="img-responsive" alt="Internet menu">
<div class="gallery-box-caption">
<div class="gallery-box-content">
<div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment