<!-- HUBL & HTML -->

<!-- Standard Image -->
<img loading="lazy" 
     data-src="{{ resize_image_url(IMAGEURL, WIDTH, HEIGHT, SIZE) }}" alt="ALT TEXT" />
     
     
<!-- Responsive Image -->
<img loading="lazy" 
     data-srcset="{{ resize_image_url(IMAGEURL, 320, HEIGHT, SIZE) }} 320w,
             {{ resize_image_url(IMAGEURL, 480, HEIGHT, SIZE) }} 480w,
             {{ resize_image_url(IMAGEURL, 800, HEIGHT, SIZE) }} 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     alt="ALT TEXT"
     >

<!-- IFRAME -->
<iframe loading="lazy" 
        data-src="IFRAMEURL" ></iframe>

          
        

          
            // Lazy Loading
(function() {
// check to see if native lazy loading is available
if ("loading" in HTMLImageElement.prototype) {

  var lazyEls = $('[loading=lazy]');
  lazyEls.each(function(){
    var src = $(this).data('src');
    var srcset = $(this).data('srcset');
    $(this).attr({
      "src" : src,
      "srcset" : srcset
    });
    $(this).addClass('loaded');
  });
  
} else {

  // if native lazyloading isnt available...
  // Dynamically include a lazy loading library of your choice
  // Here including vanilla-lazyload
  var script = document.createElement("script");
  script.async = true;
  script.src =
    "https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js";
  window.lazyLoadOptions = {
    elements_selector: "[loading=lazy]",
    //eventually more options here
  };
  document.body.appendChild(script);
  
}
}());