Preconnect naar de origin van clickout destination links

roy-preconnect-clickouts.js

function dynamicPreconnects(){
  try {
    // https://www.npmjs.com/package/preconnect
    var preconnect = function() {
      "use strict";
      return function(n, e) {
        var t, c, o = "link",
            r = "preconnect",
            i = "appendChild",
            u = "createElement",
            a = "requestIdleCallback",
            injectLinkEl = function(c, o, u) {
              c.rel = o, c.href = u, o == r && 0 != u.indexOf(e.location.href) && (c.crossOrigin = "anonymous"), n[a] && t ? n[a]((function() {
                e.head[i](c)
              }), {
                timeout: t
              }) : e.head[i](c)
            };
  
        function preconnect(n) {
          t = (n = n || {}).timeout || 0, c = n.getDns || !1
        }
        return preconnect.prototype.add = function(n) {
          injectLinkEl(e[u](o), r, n), c && injectLinkEl(e[u](o), "dns-prefetch", n)
        }, preconnect
      }(window, document)
    }()
  
    function injectPreconnectUnlessAlreadyExists(origin){
      var preconnectElements = document.querySelectorAll("link[rel=preconnect]"),
          exists = false
  
      preconnectElements.forEach(elem => {
        if(elem.href.includes(origin))
        exists = true
      })
  
      if (!exists) {
        var preconnecter = new preconnect({
          // Injects `dns-prefetch` hints in addition to `preconnect` hints (for IE)
          getDns: true
        })
        preconnecter.add(origin)
      }
    }
  
    if (document.querySelectorAll) {
  
      var clickoutLinks = document.querySelectorAll("a[href*=bekijken]"),
          attribute = "data-destination",
          isMobile = 'ontouchstart' in document.documentElement
  
      // On touch devices add the preconnect hint when the link becomes visible
      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
      if(isMobile && 'IntersectionObserver' in window){
  
        // https://webdesign.tutsplus.com/tutorials/how-to-intersection-observer--cms-30250
        function onChange(entries, observer) {
          entries.forEach(entry => {
            if (entry.intersectionRatio > 0) {
              injectPreconnectUnlessAlreadyExists(entry.target.getAttribute(attribute))
            }
          })
        }
  
        var options = {
          root: null, // Relative to document viewport 
          rootMargin: '0px', // Margin around root. Values are similar to css property. Unitless values not allowed
          threshold: 1.0 // Visible amount of item shown in relation to root
        }
  
        var observer = new IntersectionObserver(onChange, options)
    
        clickoutLinks.forEach(link => {
          if (link.getAttribute(attribute)) {
            observer.observe(link)
          }
        })
  
      } else { // On non-touch devices, add the preconnect hint when the user hovers over the link
  
        clickoutLinks.forEach(link => {
          link.addEventListener("mouseover", event => {
            injectPreconnectUnlessAlreadyExists(link.getAttribute(attribute))
          }, {
            // Execute this event handler code only once avoid multiple injections of hints
            once: true
          })
        })
      }
    }
  } catch (e) {
  }
}

document.addEventListener("DOMContentLoaded", dynamicPreconnects)