medium style lazy images

<div class="lazyImg lazyImg--notloaded" style="background-image: url(<?php echo $hero_bg['sizes']['lazyImg']?>)" data-image="<?php echo $hero_bg['sizes']['hero-bg']?>"></div>
<noscript><div style="background-image: url(<?php echo $hero_bg['sizes']['hero-bg']?>)"></div></noscript>


function loadLazyImg() {
  $.each( $('.lazyImg'), function(index, val) {
      var img = new Image()
      var src = $(this).attr('data-image')
      img.src = src
      var image = $(this)
      img.onload = function() {
        image.css('background-image', 'url(' + src + ')')
        image.removeClass('lazyImg--notloaded')
        image.removeAttr('data-image')
      }
    })
},
        
        
.lazyImg {
  transition: filter 300ms ease-in-out, transform 300ms ease-in-out;
}

.lazyImg--notloaded {
  filter: blur(9px);
  transform: scale(1.02);
}

.no-js .lazyImg--notloaded {
    display: none;
}