How lazy loading works in Prime UI

Lazy Loading 

Lazy loading refers to delaying resource downloading by browsers. That way only useful resources are downloaded and hence improving user experience. 

We recommend only lazy loading images which are not in viewport and scripts which do not require initial attention. 

Basic Understanding

We use Package @shinsenter/defer.js to lazy load our images, videos, iframes and scripts.

You can learn more on lazy loading from this github page.

Lazy Loading images

Images can be lazy loaded by using class="lazy" and adding data-src attribute.

<img alt="Image" class="lazy" data-src="image_url.jpg" />

Lazy Loading scripts

Scripts can also be lazy loaded by setting script types.

Prime UI offers two ways to defer lazy loading of scripts --

<!--[ This is a regular script ]-->
  <script type="text/javascript">
    ....
  </script>

   <!--[ This is a lazy loaded script ]-->
  <script type="lazyscript">
    ....
  </script>

  <!--[ This is a more lazy loaded script ]-->
  <script type="more-lazyscript">
    ....
  </script>

You can also use same method to lazy load external scripts and adsense code.

  <script src="main.js" type="more-lazyscript"></script>