Commit cf9c3314 authored by Lorenzo Faletra's avatar Lorenzo Faletra

fix img lazy-loading

parent d1fe1962
......@@ -12,7 +12,7 @@
</p>
</div>
<div class="col-lg-6 text-center">
<p><img width="400" data-src="img/desktop.jpg"/></p>
<p><img width="400" class="lazy" 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" data-src="img/arm-soc.jpg" /></p>
<p><img class="rounded mx-auto d-block float-left lazy" 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" data-src="/img/menu-full.jpg"/></p></div>
<div class="col-lg-6 text-center"><p><img class="lazy" 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 data-src="img/logo.jpg" width="60" height="60" />
<img class="lazy" 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 data-src="img/workstation.png" width="60" height="60" />
<img class="lazy" 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 data-src="img/iot.png" width="55" height="55" />
<img class="lazy" 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,14 +53,79 @@
<script src="js/jquery.easing.min.js"></script>
<script src="js/wow.min.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'));
!function(window){
var $q = function(q, res){
if (document.querySelectorAll) {
res = document.querySelectorAll(q);
} else {
var d=document
, a=d.styleSheets[0] || d.createStyleSheet();
a.addRule(q,'f:b');
for(var l=d.all,b=0,c=[],f=l.length;b<f;b++)
l[b].currentStyle.f && c.push(l[b]);
a.removeRule(0);
res = c;
}
return res;
}
, addEventListener = function(evt, fn){
window.addEventListener
? this.addEventListener(evt, fn, false)
: (window.attachEvent)
? this.attachEvent('on' + evt, fn)
: this['on' + evt] = fn;
}
, _has = function(obj, key) {
return Object.prototype.hasOwnProperty.call(obj, key);
}
;
function loadImage (el, fn) {
var img = new Image()
, src = el.getAttribute('data-src');
img.onload = function() {
if (!! el.parent)
el.parent.replaceChild(img, el)
else
el.src = src;
fn? fn() : null;
}
}, false)
img.src = src;
}
function elementInViewport(el) {
var rect = el.getBoundingClientRect()
return (
rect.top >= 0
&& rect.left >= 0
&& rect.top <= (window.innerHeight || document.documentElement.clientHeight)
)
}
var images = new Array()
, query = $q('img.lazy')
, processScroll = function(){
for (var i = 0; i < images.length; i++) {
if (elementInViewport(images[i])) {
loadImage(images[i], function () {
images.splice(i, i);
});
}
};
}
;
// Array.prototype.slice.call is not callable under our lovely IE8
for (var i = 0; i < query.length; i++) {
images.push(query[i]);
};
processScroll();
addEventListener('scroll',processScroll);
}(this);
</script>
<script>
(function($) {
......
......@@ -39,21 +39,21 @@
<div class="row">
<div class="col-lg-4 col-md-4 text-center">
<div class="feature">
<img data-src="img/security.png" width="60" height="60" />
<img class="lazy" 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 data-src="img/privacy.png" width="60" height="60" />
<img class="lazy" 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 data-src="img/develop.png" width="55" height="55" />
<img class="lazy" 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 data-src="img/shield.png" width="100" />
<img class="lazy" 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 data-src="img/gpl.png" width="100" /></a>
<a href="#alertModal" data-toggle="modal" data-target="#alertModal"><img class="lazy" 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 data-src="img/lightweight.png" width="100" />
<img class="lazy" 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 data-src="./screenshots/01.jpg" class="img-responsive" alt="Desktop">
<img data-src="./screenshots/01.jpg" class="img-responsive lazy" 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 data-src="./screenshots/02.jpg" class="img-responsive" alt="Tools Menu">
<img data-src="./screenshots/02.jpg" class="img-responsive lazy" 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 data-src="./screenshots/03.jpg" class="img-responsive" alt="Bottom Menu">
<img data-src="./screenshots/03.jpg" class="img-responsive lazy" 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 data-src="./screenshots/04.jpg" class="img-responsive" alt="Tools in action">
<img data-src="./screenshots/04.jpg" class="img-responsive lazy" 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 data-src="./screenshots/05.jpg" class="img-responsive" alt="GUI tools">
<img data-src="./screenshots/05.jpg" class="img-responsive lazy" 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 data-src="./screenshots/06.jpg" class="img-responsive" alt="Secure browsing">
<img data-src="./screenshots/06.jpg" class="img-responsive lazy" 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 data-src="./screenshots/07.jpg" class="img-responsive" alt="Secret chats">
<img data-src="./screenshots/07.jpg" class="img-responsive lazy" 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 data-src="./screenshots/08.jpg" class="img-responsive" alt="Programming">
<img data-src="./screenshots/08.jpg" class="img-responsive lazy" 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 data-src="./screenshots/09.jpg" class="img-responsive" alt="Internet menu">
<img data-src="./screenshots/09.jpg" class="img-responsive lazy" 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