Lazy Loading

Posted by on March 17, 2019

To add lazy loading is easy in Gila CMS. We just include the a script link in the footer of the website. When the javascript file loads and every time we scroll in the page, a function will search for a all element with class lazy and will load the data only if the element is visible on the screen.

To include the script:

<script src="src/core/assets/lazyLoad.js"></script>

To load an image:

<img class="lazy" data-src="path-to-image.jpg">

Result:

<img src="path-to-image.jpg">

Other cases:

  1. Background
    <div class="lazy" data-src="center url('bg.jpg')"></div>
    <div style="background: center url('bg.jpg')"></div>
  2.  Background image
    <div class="lazy" data-image="url('bg.jpg')"></div>
    ​<div style="background-image: url('bg.jpg')"></div>
  3.  HTML load
    <div class="widget lazy" data-load="lzld/widget/3"></div>
    ​<div class="widget">The html response from lzld/widget/3</div>