Pfthb

So I'm trying to use this script https://codepen.io/cjl750/pen/pEAmgR in my website.

 // LAZY LOAD FUNCTION
function lazyLoad() 
 $('iframe').each(function() 
 var frame = $(this),
 vidSource = $(frame).attr('data-src'),
 distance = $(frame).offset().top - $(window).scrollTop(),
 distTopBot = window.innerHeight - distance,
 distBotTop = distance + $(frame).height();

 if (distTopBot >= 0 && distBotTop >= 0) // if frame is partly in view
 $(frame).attr('src', vidSource);
 $(frame).removeAttr('data-src');
 
 );

var throttled = _.throttle(lazyLoad, 100);
$(window).scroll(throttled);


// ILLUSTRATION OF VARIABLES
// as calculated on div#example
function lazyLoadExample() 
 var frame = $('#example'),
 vidSource = $(frame).attr('data-src'),
 distance = $(frame).offset().top - $(window).scrollTop(),
 distTopBot = Math.round(window.innerHeight - distance), // distance from top of frame to bottom of viewport
 distBotTop = Math.round(distance + $(frame).height()); // distance from bottom of frame to top of viewport

 document.getElementById('stick1').innerHTML = "distBotTop: " + distBotTop;
 document.getElementById('stick2').innerHTML = "distTopBot: " + distTopBot;

var throttled = _.throttle(lazyLoadExample, 100);
$(window).scroll(throttled);

But since the site handles both jQuery and Mootools, I'm getting a conflict:

Uncaught TypeError: $ is not a function
Depending on what I do, I even get a LazyLoad is not a function

To "fix" it I've replaced every $ for jquery

Like this:

// LAZY LOAD FUNCTION
function lazyLoad() 
 jQuery('iframe').each(function() 
 var frame = jQuery(this),
 vidSource = jQuery(frame).attr('data-src'),
 distance = jQuery(frame).offset().top - jQuery(window).scrollTop(),
 distTopBot = window.innerHeight - distance,
 distBotTop = distance + jQuery(frame).height();

 if (distTopBot >= 0 && distBotTop >= 0) // if frame is partly in view
 jQuery(frame).attr('src', vidSource);
 jQuery(frame).removeAttr('data-src');
 
 );

var throttled = _.throttle(lazyLoad, 100);
jQuery(window).scroll(throttled);


// ILLUSTRATION OF VARIABLES
// as calculated on div#example
function lazyLoadExample() 
 var frame = jQuery('#example'),
 vidSource = jQuery(frame).attr('data-src'),
 distance = jQuery(frame).offset().top - jQuery(window).scrollTop(),
 distTopBot = Math.round(window.innerHeight - distance), // distance from top of frame to bottom of viewport
 distBotTop = Math.round(distance + jQuery(frame).height()); // distance from bottom of frame to top of viewport

 document.getElementById('stick1').innerHTML = "distBotTop: " + distBotTop;
 document.getElementById('stick2').innerHTML = "distTopBot: " + distTopBot;

var throttled = _.throttle(lazyLoadExample, 100);
jQuery(window).scroll(throttled);

But I know that's not the right way to fix it. Please help.

I have even tried something like jQuery(function lazyLoad(&) );, no can do.

Aditional javascript:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>

PS: The script is supposed to Lazy Load iframes.