Browse Source

[ENH] Add lazy loading of images

pull/38/head
Boris 2 months ago
parent
commit
af8092e7d4
  1. 1
      www/boris/inc/header.php
  2. 1
      www/boris/lib/lazyImg.min.js

1
www/boris/inc/header.php

@ -10,6 +10,7 @@ $bodyClasses .= $home ? 'home' : '';
<title>Astroport "<?php echo STATION_NAME; ?>"</title>
<link rel="stylesheet" href="styles/<?php echo THEME; ?>/style.css" type="text/css" />
<link rel="icon" type="image/png" href="./styles/<?php echo THEME; ?>/logo.png" />
<script type="text/javascript" src="/lib/lazyImg.min.js"></script>
</head>
<body class="<?php echo $bodyClasses; ?>">

1
www/boris/lib/lazyImg.min.js

@ -0,0 +1 @@
var lazyImg={};!function(){lazyImg.image="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEA",lazyImg.custom_offset=100,lazyImg.view_elements=[],lazyImg.viewportHeight=lazyImg.viewportWidth=0,lazyImg.body=lazyImg.docEl=null,lazyImg.initVar=function(){lazyImg.viewportHeight=window.innerHeight,lazyImg.viewportWidth=window.innerWidth,lazyImg.body=document.body,lazyImg.docEl=document.documentElement},lazyImg.setConfig=function(a,b){lazyImg.image=a||lazyImg.image,lazyImg.custom_offset=b||lazyImg.custom_offset},lazyImg.reveal=function(){for(var a=window.scrollTop||lazyImg.docEl.scrollTop||lazyImg.body.scrollTop,b=window.scrollLeft||lazyImg.docEl.scrollLeft||lazyImg.body.scrollLeft,c=lazyImg.docEl.clientTop||lazyImg.body.clientTop||0,d=lazyImg.docEl.clientLeft||lazyImg.body.clientLeft||0,e=0;e<lazyImg.view_elements.length;e++){var f=lazyImg.view_elements[e],g=f.getBoundingClientRect(),h=Math.round(g.top+a-c),i=Math.round(g.bottom+a-c),j=Math.round(g.left+b-d);i>a-lazyImg.custom_offset&&h<a+lazyImg.viewportHeight+lazyImg.custom_offset&&j>b-lazyImg.custom_offset&&j<b+lazyImg.viewportWidth+lazyImg.custom_offset&&(f.src=f.getAttribute("data-lazyimg-src"),f.srcset=f.getAttribute("data-lazyimg-srcset"),f.removeAttribute("data-lazyimg-loading"),f.removeAttribute("data-lazyimg-src"),f.removeAttribute("data-lazyimg-srcset"),lazyImg.view_elements.splice(e,1),e--)}0==lazyImg.view_elements.length&&lazyImg.removeListener()},lazyImg.list_maker=function(){for(var a=document.querySelectorAll("img:not([data-lazyimg-list])"),b=0;b<a.length;b++){var c=a[b];lazyImg.view_elements.push(c),c.setAttribute("data-lazyimg-list","true"),c.setAttribute("data-lazyimg-loading","true"),c.setAttribute("data-lazyimg-src",c.src),c.setAttribute("data-lazyimg-srcset",c.srcset),c.src=lazyImg.image,c.srcset=""}},lazyImg.throttle=function(a,b){var c=!1;return function(){c||(a.call(),c=!0,setTimeout(function(){c=!1},b))}},lazyImg.listener=function(){lazyImg.initVar(),lazyImg.reveal()},lazyImg.throttleListener=lazyImg.throttle(lazyImg.listener,100),lazyImg.removeListener=function(){window.removeEventListener("scroll",lazyImg.throttleListener),window.removeEventListener("resize",lazyImg.throttleListener)},lazyImg.activeListener=function(){window.addEventListener("scroll",lazyImg.throttleListener,!1),window.addEventListener("resize",lazyImg.throttleListener,!1)},lazyImg.activeListener(),lazyImg.intervalObject=setInterval(function(){lazyImg.list_maker()},20),window.addEventListener("load",function(){clearInterval(lazyImg.intervalObject),lazyImg.list_maker(),lazyImg.activeListener(),lazyImg.initVar(),lazyImg.reveal()},!1)}();
Loading…
Cancel
Save