JSFiddle - React, Tailwind, and code Playground

by samonela

HTML

<div>

  <iframe frameborder="0" marginheight="0" marginwidth="0" title="data visualization" allowtransparency="true" allowfullscreen="true" class="tableauViz" style="display: block; width: 1300px; height: 827px; margin: 0px; padding: 0px; border: none;" data-src="https://public.tableau.com/views/TheSpaceShuttle/SSO?:embed=y&amp;:showVizHome=no&amp;:host_url=https%3A%2F%2Fpublic.tableau.com%2F&amp;:embed_code_version=3&amp;:tabs=no&amp;:toolbar=yes&amp;:animate_transition=yes&amp;:display_static_image=no&amp;:display_spinner=no&amp;:display_overlay=yes&amp;:display_count=yes&amp;:loadOrderID=0" name="SpaceShuttleFlights"></iframe>

</div>

<div>

  <iframe frameborder="0" marginheight="0" marginwidth="0" title="data visualization" allowtransparency="true" allowfullscreen="true" class="tableauViz" style="display: block; width: 920px; height: 687px; margin: 0px; padding: 0px; border: none;" data-src="https://public.tableau.com/views/MakeoverMondayNYTimesCrossword/WomenConstructors?:embed=y&amp;:showVizHome=no&amp;:host_url=https%3A%2F%2Fpublic.tableau.com%2F&amp;:embed_code_version=3&amp;:tabs=no&amp;:toolbar=yes&amp;:animate_transition=yes&amp;:display_static_image=no&amp;:display_spinner=no&amp;:display_overlay=yes&amp;:display_count=yes&amp;:loadOrderID=0" name="crosswordPuzzle"></iframe>

</div>

<div>

  <iframe frameborder="0" marginheight="0" marginwidth="0" title="data visualization" allowtransparency="true" allowfullscreen="true" class="tableauViz" style="display: block; width: 1300px; height: 827px; margin: 0px; padding: 0px; border: none;" data-src="https://public.tableau.com/views/spotify_2/SpotifyChristmasmusic?:embed=y&amp;:showVizHome=no&amp;:host_url=https%3A%2F%2Fpublic.tableau.com%2F&amp;:embed_code_version=3&amp;:tabs=no&amp;:toolbar=yes&amp;:animate_transition=yes&amp;:display_static_image=no&amp;:display_spinner=no&amp;:display_overlay=yes&amp;:display_count=yes&amp;:loadOrderID=0" name="spotifyChristmasSongs"></iframe>

</div>

<div>

 ...

JavaScript

const throttle = (fn, delay) => {
    let canCall = true;
    return (...args) => {
      console.log('in throttled function - canCall: ',canCall);
      if (canCall) {
        fn.apply(null, args);
        canCall = false;
        setTimeout(_=>canCall = true, delay);
        /*setTimeout(() => {
          console.log('in throttled delayed function - setting canCall to true');
          canCall = true;
        }, delay);*/
      }
    };
  };

  const setAttributes = (el, options) =>
    Object.keys(options).forEach(attr => el.setAttribute(attr, options[attr]));

  const w = window;
  const d = document;
  const b = d.body;
  const x = w.innerWidth || e.clientWidth || b.clientWidth;
  const y = w.innerHeight || e.clientHeight || b.clientHeight;

  /* unecessary, but to have same object format, e.g. readability */
  const win = Object.create(null);
  win.y = y;

  const frame = d.querySelectorAll("iframe");

  /** may be over doing it here... test results */
  const preloadPath = () =>
    frame.forEach(item => {
      const source = item.getAttribute("data-src");
      const preloadLink = d.createElement("link");
      const head = d.getElementsByTagName("head")[0];
    console.log('preloadPath() - iframe - ',source)

      /*setAttributes(preloadLink, {
        rel: "preload",
        as: "document",
        type: "text/html",
        crossorigin: "anonymous",
        href: source
      });*/
      console.log('preloadLink before assign: ',preloadLink);
      Object.assign(preloadLink, {
        rel: "preload",
        as: "document",
        type: "text/html",
        crossorigin: "anonymous",
        href: source
      });
			console.log('preloadLink: ',preloadLink);
      head.insertBefore(preloadLink, head.firstChild);
    });

  const loadFrame = () =>
    frame.forEach(item => {
    console.log('loadFrame() - iframe.src - ',item.src);
      /* only run if not src is present */
      if (!item.src) {
        const source = item.getAttribute("data-src"); //...