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 @@ ...@@ -12,7 +12,7 @@
</p> </p>
</div> </div>
<div class="col-lg-6 text-center"> <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><br/><br/><br/>
</div> </div>
<div class="row"> <div class="row">
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</p> </p>
</div> </div>
<div class="col-lg-6 text-center"> <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><br/><br/><br/>
</div> </div>
<div class="row"> <div class="row">
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<p class="text-faded wow fadeInRight"><?php echo $lang['download-security-2']; ?></p> <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> <p class="text-faded wow fadeInUp"><?php echo $lang['download-security-3']; ?></p>
</div> </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><br/><br/><br/>
<div class="row"> <div class="row">
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class="row"> <div class="row">
<div class="col-lg-4 col-md-4 text-center wow fadeInLeft"> <div class="col-lg-4 col-md-4 text-center wow fadeInLeft">
<div class="feature"> <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> <h3><?php echo $lang['download-2']; ?></h3>
<p class="text-muted"><?php echo $lang['download-3']; ?></p> <p class="text-muted"><?php echo $lang['download-3']; ?></p>
</div> </div>
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</div> </div>
<div class="col-lg-4 col-md-4 text-center wow fadeInUp"> <div class="col-lg-4 col-md-4 text-center wow fadeInUp">
<div class="feature"> <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> <h3><?php echo $lang['download-4']; ?></h3>
<p class="text-muted"><?php echo $lang['download-5']; ?></p> <p class="text-muted"><?php echo $lang['download-5']; ?></p>
</div> </div>
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
</div> </div>
<div class="col-lg-4 col-md-4 text-center wow fadeInRight"> <div class="col-lg-4 col-md-4 text-center wow fadeInRight">
<div class="feature"> <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> <h3><?php echo $lang['download-6']; ?></h3>
<p class="text-muted"><?php echo $lang['download-7']; ?></p> <p class="text-muted"><?php echo $lang['download-7']; ?></p>
</div> </div>
......
...@@ -53,5 +53,15 @@ ...@@ -53,5 +53,15 @@
<script src="js/jquery.easing.min.js"></script> <script src="js/jquery.easing.min.js"></script>
<script src="js/wow.js"></script> <script src="js/wow.js"></script>
<script src="js/scripts.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> </body>
</html> </html>
...@@ -39,21 +39,21 @@ ...@@ -39,21 +39,21 @@
<div class="row"> <div class="row">
<div class="col-lg-4 col-md-4 text-center"> <div class="col-lg-4 col-md-4 text-center">
<div class="feature"> <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> <h3><?php echo $lang['index-10']; ?></h3>
<p class="text-muted"><?php echo $lang['index-11']; ?></p> <p class="text-muted"><?php echo $lang['index-11']; ?></p>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-4 text-center"> <div class="col-lg-4 col-md-4 text-center">
<div class="feature"> <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> <h3><?php echo $lang['index-12']; ?></h3>
<p class="text-muted"><?php echo $lang['index-13']; ?></p> <p class="text-muted"><?php echo $lang['index-13']; ?></p>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-4 text-center"> <div class="col-lg-4 col-md-4 text-center">
<div class="feature"> <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> <h3><?php echo $lang['index-14']; ?></h3>
<p class="text-muted"><?php echo $lang['index-15']; ?></p> <p class="text-muted"><?php echo $lang['index-15']; ?></p>
</div> </div>
...@@ -72,14 +72,14 @@ ...@@ -72,14 +72,14 @@
<p><?php echo $lang['index-18']; ?></p> <p><?php echo $lang['index-18']; ?></p>
</div> </div>
<div class="media-right"> <div class="media-right">
<img src="img/shield.png" width="100" /> <img data-src="img/shield.png" width="100" />
</div> </div>
</div> </div>
<hr> <hr>
<div class="media wow fadeInLeft"> <div class="media wow fadeInLeft">
<h3><?php echo $lang['index-19']; ?></h3> <h3><?php echo $lang['index-19']; ?></h3>
<div class="media-left"> <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>
<div class="media-body media-middle"> <div class="media-body media-middle">
<p><?php echo $lang['index-20']; ?></p> <p><?php echo $lang['index-20']; ?></p>
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
<p><?php echo $lang['index-22']; ?></p> <p><?php echo $lang['index-22']; ?></p>
</div> </div>
<div class="media-right"> <div class="media-right">
<img src="img/lightweight.png" width="100" /> <img data-src="img/lightweight.png" width="100" />
</div> </div>
</div> </div>
</div> </div>
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
<div class="row no-gutter"> <div class="row no-gutter">
<div class="col-lg-4 col-sm-6"> <div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/01.jpg"> <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-caption">
<div class="gallery-box-content"> <div class="gallery-box-content">
<div> <div>
...@@ -115,7 +115,7 @@ ...@@ -115,7 +115,7 @@
</div> </div>
<div class="col-lg-4 col-sm-6"> <div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/02.jpg"> <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-caption">
<div class="gallery-box-content"> <div class="gallery-box-content">
<div> <div>
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
<div class="clearfix hidden-lg"> </div> <div class="clearfix hidden-lg"> </div>
<div class="col-lg-4 col-sm-6"> <div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/03.jpg"> <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-caption">
<div class="gallery-box-content"> <div class="gallery-box-content">
<div> <div>
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
</div> </div>
<div class="col-lg-4 col-sm-6"> <div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/04.jpg"> <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-caption">
<div class="gallery-box-content"> <div class="gallery-box-content">
<div> <div>
...@@ -153,7 +153,7 @@ ...@@ -153,7 +153,7 @@
<div class="clearfix hidden-lg"> </div> <div class="clearfix hidden-lg"> </div>
<div class="col-lg-4 col-sm-6"> <div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/05.jpg"> <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-caption">
<div class="gallery-box-content"> <div class="gallery-box-content">
<div> <div>
...@@ -165,7 +165,7 @@ ...@@ -165,7 +165,7 @@
</div> </div>
<div class="col-lg-4 col-sm-6"> <div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/06.jpg"> <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-caption">
<div class="gallery-box-content"> <div class="gallery-box-content">
<div> <div>
...@@ -177,7 +177,7 @@ ...@@ -177,7 +177,7 @@
</div> </div>
<div class="col-lg-4 col-sm-6"> <div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/07.jpg"> <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-caption">
<div class="gallery-box-content"> <div class="gallery-box-content">
<div> <div>
...@@ -190,7 +190,7 @@ ...@@ -190,7 +190,7 @@
<div class="clearfix hidden-lg"> </div> <div class="clearfix hidden-lg"> </div>
<div class="col-lg-4 col-sm-6"> <div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/08.jpg"> <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-caption">
<div class="gallery-box-content"> <div class="gallery-box-content">
<div> <div>
...@@ -202,7 +202,7 @@ ...@@ -202,7 +202,7 @@
</div> </div>
<div class="col-lg-4 col-sm-6"> <div class="col-lg-4 col-sm-6">
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./screenshots/09.jpg"> <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-caption">
<div class="gallery-box-content"> <div class="gallery-box-content">
<div> <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