Получение конфликта mootools и jQuery в сценарии LazyLoad

Question

Итак, я пытаюсь использовать этот скрипт https://codepen.io/cjl750/pen/pEAmgR на своем веб-сайте.

    // 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);

Но так как сайт обрабатывает как jQuery, так и Mootools, я получаю конфликт:

Uncaught TypeError: $ is not a function В зависимости от того, что я делаю, я даже получаю LazyLoad is not a function

Чтобы «исправить» это, я заменил каждые $ на jquery

Нравитсяэто:

// 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);

Но я знаю, что это не правильный способ исправить это.Пожалуйста, помогите.

Я даже пробовал что-то вроде jQuery(function lazyLoad(&) {});, не могу сделать.

Дополнительный 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: Сценарий должен Lazy Loadплавающие фреймы.