DrAxe Wistia LazyLoad Module

0.README.md

DrAxe Wistia LazyLoad Module

2017-01-13: I GOT AN EMAIL EDIT: Apparently Wistia has a new async thing - check into that first.

Should be included once / page either inline after the video or via an external minified js module.

Once included you can take your wistia videos (sample html from collagen protein below):

<iframe src="//fast.wistia.net/embed/iframe/fa2pw4wdza?videoFoam=true" 
  allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" 
  name="wistia_embed" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" 
  oallowfullscreen="" msallowfullscreen="" width="720" height="405"></iframe>
  <script src="//fast.wistia.net/assets/external/E-v1.js"></script>

and refactor them to be just images till window.load:

<img class="wistia_embed" width="720" height="405"
  src="http://draxe.com/wp-content/themes/draxe2014/images/josh-axe-home-form.png"
  data-wistia-iframe-src="http://fast.wistia.net/embed/iframe/fa2pw4wdza?videoFoam=true"
  data-wistia-optional-json-attribute-overrides='{"allowtransparency":"false"}'>

notes:

Not sure what this file does but ansillary testing shows its removeable (might be analytics though)

<script src="//fast.wistia.net/assets/external/E-v1.js"></script>

Ping [email protected] if you have any questions!

-Tom F | 2016-03-14

1.wistia-perf.min.html

<script data-wistia-lazyload-about="https://git.io/va47y">window[window.addEventListener?"addEventListener":"attachEvent"](window.addEventListener?"load":"onload",function(){function a(){c("log",[].slice.call(arguments))}function b(){c("error",[].slice.call(arguments))}function c(a,b){b.unshift("wista lazyload:"),console[a].apply(console,b)}setTimeout(function(){var c=window.jQuery;return c?void c("img[data-wistia-iframe-src]").each(function(){var d=c(this),e=d.attr("data-iframe-src"),f=d.attr("data-wistia-optional-json-attribute-overrides");if(!e)return b("no src found",this);var h,g={allowtransparency:"true",frameborder:"0",scrolling:"no","class":"wistia_embed",name:"wistia_embed",allowfullscreen:"",mozallowfullscreen:"",webkitallowfullscreen:"",oallowfullscreen:"",msallowfullscreen:"",width:"720",height:"405"};try{c.parseJSON(f)}catch(i){return b("json formatting parse error on overrides",this,f)}h=h||{},!h.height&&d.attr("height")&&(h.height=d.attr("height")),!h.width&&d.attr("width")&&(h.width=d.attr("width")),c.extend(g,h);var j=c("<iframe />");j.attr(g),j.attr("src",e),d.replaceWith(j),a("replaced",d[0],"with",j[0])}):b("jQuery required")},100)});;</script>

2.wistia.perf.js

/*
Lazy Loads Wistia if it exists

<img class="wistia_embed" width="720" height="405"
  src="http://draxe.com/wp-content/themes/draxe2014/images/josh-axe-home-form.png"
  data-wistia-iframe-src="http://fast.wistia.net/embed/iframe/fa2pw4wdza?videoFoam=true"
  data-wistia-optional-json-attribute-overrides='{"allowtransparency":"false"}'>

 */
window[window.addEventListener ? 'addEventListener' : 'attachEvent']
  (window.addEventListener ? 'load' : 'onload', function() {
    // on window.load find the iframe and
    setTimeout(function() { // setTimeout to let browser bar stop spinning
      var $ = window.jQuery;
      if (!$) return error('jQuery required');
      $('img[data-wistia-iframe-src]').each(function() {

        var $img = $(this);
        var iframeSrc = $img.attr('data-iframe-src');
        var overridesString = $img.attr('data-wistia-optional-json-attribute-overrides');

        if (!iframeSrc) return error('no src found', this);
        var defaults = {
          allowtransparency: "true",
          frameborder: "0",
          scrolling: "no",
          "class": "wistia_embed",
          name: "wistia_embed",
          allowfullscreen: "",
          mozallowfullscreen: "",
          webkitallowfullscreen: "",
          oallowfullscreen: "",
          msallowfullscreen: "",
          width: "720",
          height: "405"
        };

        // set the overrides for each module and use img attribute
        // width/height as priority goal if present
        var overrides;
        try {
          $.parseJSON(overridesString);
        } catch (e) {
          return error('json formatting parse error on overrides', this, overridesString);
        }

        overrides = overrides || {};

        if (!overrides.height && $img.attr('height'))
          overrides.height = $img.attr('height');
        if (!overrides.width && $img.attr('width'))
          overrides.width = $img.attr('width');

        $.extend(defaults, overrides);

        var $iframe = $('<iframe />');
        $iframe.attr(defaults);

        $iframe.attr('src', iframeSrc);

        $img.replaceWith($iframe);

        log('replaced', $img[0], 'with', $iframe[0]);

      });
    }, 100);

    /*jshint latedef:false*/
    function log( /*args*/ ) {
      logHelper('log', [].slice.call(arguments));
    }

    function error( /*args*/ ) {
      logHelper('error', [].slice.call(arguments));
    }

    function logHelper(key, args) {
      args.unshift('wista lazyload:');
      console[key].apply(console, args);
    }

  });