Lazy Loading
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:
- Background
<div class="lazy" data-src="center url('bg.jpg')"></div>
?<div style="background: center url('bg.jpg')"></div>
- Background image
<div class="lazy" data-image="url('bg.jpg')"></div>
??<div style="background-image: url('bg.jpg')"></div>
- HTML load
<div class="widget lazy" data-load="lzld/widget/3"></div>
?<div class="widget">The html response from lzld/widget/3</div>