lazy_load_images.rb

## js at bottom of layout
# source https://www.npmjs.com/package/vanilla-lazyload
<script>
(function(w, d){
    var b = d.getElementsByTagName('body')[0];
    var s = d.createElement("script"); 
    var v = !("IntersectionObserver" in w) ? "8.17.0" : "10.19.0";
    s.async = true; // This includes the script as async. See the "recipes" section for more information about async loading of LazyLoad.
    s.src = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@" + v + "/dist/lazyload.min.js";
    w.lazyLoadOptions = {/* Your options here */};
    b.appendChild(s);
}(window, document));
</script>
    

# create a helper
def lazy_image_tag(src, args = {})
  css_class = args.delete(:class)
  args[:class] = [css_class, "lazy"].reject(&:blank?).join(" ")
  data = {}
  orig_data = args.delete(:data)
  data.merge! orig_data if orig_data.present?
  data.merge! src: asset_path(src)
  args[:data] = data
  tag("img", args)
end


# usage
# take any image_tag and prepend lazy_   
<%= lazy_image_tag "bios/jess.jpg", width: "350", height: "228", alt: "Jess Brown - Rails Dev", data: {some_attr: "xxx"} %>

# output
<img width="350" height="228" alt="Jess Brown - Rails Dev" class="lazy" data-some-attr="xxx" data-src="/bios/jess.jpg" />

# processed (when img comes into viewport)
<img width="350" height="228" alt="Jess Brown - Rails Dev" class="lazy error" data-some-attr="xxx" data-src="/bios/jess.jpg" src="/bios/jess.jpg" data-was-processed="true">