Lazy load images

lazy-load-images.js

// #1 using the spread operator get all our images with the class 'lazyload'
const imgElements = [...document.querySelectorAll('.adg-lazy-image')]

// IE browser support :(
var isIE;
(function() {
    var ua = window.navigator.userAgent,
        msie = ua.indexOf('MSIE '),
        trident = ua.indexOf('Trident/')

    isIE = (msie > -1 || trident > -1) ? true : false
})();
// edge browser support :(
let isEdge = window.navigator.userAgent.indexOf("Edge") > -1

if (isIE || isEdge) {
  $('.adg-lazy-image').each(function () {
    // the visible image element we'll grab our image to load from the data-src attribute
    // and apply it to the src attribute
    var change = this
    change.src = change.dataset.src
  })
}

// small polyfill for Microsoft Edge 15 isIntersecting property
// see https://github.com/WICG/IntersectionObserver/issues/211#issuecomment-309144669
if ('IntersectionObserver' in window &&
  'IntersectionObserverEntry' in window &&
  'intersectionRatio' in window.IntersectionObserverEntry.prototype &&
  !('isIntersecting' in IntersectionObserverEntry.prototype)) {
  Object.defineProperty(window.IntersectionObserverEntry.prototype, 'isIntersecting', {
    get: function () {
      return this.intersectionRatio > 0
    }
  })
}

// #2 create our new IntersectionObserver followed by our callback and any options
// 'onChange' is our callback. 'threshold' is our options - the percentage our image is visible.
let observer = new IntersectionObserver(onChange, {
  threshold: [0.15]
})

// #3 Our callback to grab all our data-src attributes when they become visible.
// This comes from our threshold set above in our options
function onChange(changes) {
  // for each element that becomes visible
  changes.forEach(change => {
    // Here is the API change mentioned in the linked tweet above
    if (change.isIntersecting) {
      // added a class to our 'target'. This is the visible image element from #1
      change.target.classList.add('visible')
      // the visible image element we'll grab our image to load from the data-src attribute
      // and apply it to the src attribute
      change.target.src = change.target.dataset.src
      // stop observing this element
      observer.unobserve(change.target)
    }
  })
}

// Here is where we'll 'observe' our elements to lazyload.
const createObserver = function () {
  // for each of our image elements
  imgElements.forEach(img => {
    // observe the image currently visible and apply #3
    observer.observe(img)
  })
}

// We'll listen for the 'load' event. Once that has fired we'll apply the function we created
// above called 'createObserver'.
window.addEventListener('load', () => {
  createObserver()
}, false)

I'm having trouble getting this to work in Edge and IE :(