Add documentation for lazyloading

[TheWebTech]

implementation issue is #36

We need to add documentation for adding lazyloading to a site. We're using native browser lazyloading with a fallback.

https://addyosmani.com/blog/lazy-loading/

<img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/>

<script>
  if ('loading' in HTMLImageElement.prototype) {
      const images = document.querySelectorAll("img.lazyload");
      images.forEach(img => {
          img.src = img.dataset.src;
      });
  } else {
      // Dynamically import the LazySizes library
    let script = document.createElement("script");
    script.async = true;
    script.src =
      "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js";
    document.body.appendChild(script);
  }
</script>

[adesignl]

Also comment that you should add a test for browsers that support lazy loading nateivly

<script> if ('loading' in HTMLImageElement.prototype) { // Browser supports loading.. } else { // Fetch and apply a polyfill/JavaScript library // for lazy-loading instead. } </script>

[TheWebTech]

that test is in the code above

I'm not certain though if lazysizes is going to be the right fallback library(haven't used it, might be overkill). that's more on the implementation side though than the docs.

[adesignl]

i'm an idiot. ill go get in a hole now :)

[TheWebTech]

lol, not an idiot. just skimmed the script is all lol.

[adesignl]

I use this method personally It works great for blogs.

LQIP/blurry image placeholder/Blur up image technique If you are using the LQIP (Low Quality Image Placeholder) pattern, simply add a low quality image as the src:

<!-- responsive example: -->
<img
	data-sizes="auto"
    src="{{ resize_image_url( <HUBSPOT URL>, 10) }}"
	data-srcset="{{ resize_image_url( <HUBSPOT URL>, 220) }} 220w,
   {{ resize_image_url( <HUBSPOT URL>, 300) }} 300w,
    {{ resize_image_url( <HUBSPOT URL>, 600) }} 600w,
   {{ resize_image_url( <HUBSPOT URL>, 900) }} 900w" class="lazyload" />

<!-- or non-responsive: -->
<img src="{{ resize_image_url( <HUBSPOT URL>, 10) }}" data-src="{{ resize_image_url( <HUBSPOT URL>, 900) }}" class="lazyload" />

[adesignl]

I like the features of the polyfill, seems like its built well.

[TheWebTech]

I have a macro for generating srcsets, I'll incorporate that into the theme-macros.css file I also have a HubSpot CSS only blur up technique that I may incorporate in but it needs to be well documented otherwise people could use it incorrectly.

regarding using a blur up lazyload polyfill, I'm totally cool with that, what library do you use?

[adesignl]

b-lazy is my goto. It does video as well https://github.com/dinbror/blazy