Lazy load images in a modal with a slider

Question

I have a website that I am trying to optimize and one of the things that keeps coming back is I need to lazy load my larger images that I have inside a modal, the modal works as it's supposed to and opens and closes and the slider works as intended, however when I add this code to lazy load the modal the pictures do not load when the modal is opened. When I remove it everything works again. Can anyone see a reason as to why this happens? I have read some stuff about in the <img src="" you are supposed to put a low res image and in the tag you are to add the data-src="" for the main picture. When I do this all that happens is the low res image loads, and the larger ones never load. The page is live here: https://www.smart-1.us/media.php

<script>

function lazyLoad(){
    var $images = $('.lazy_load');

    $images.each(function(){
        var $img = $(this),
            src = $img.attr('data-src');

        $img
            .on('load',imgLoaded($img[0]))
            .attr('src',src);
        });
    };

    $('.modal').on("show.bs.modal", function () {
    lazyLoad();
};          

</script>

<div id="Lightbox" class="modal">
  <span class="close pointer" onclick="closeLightbox()">&times;</span>
  <div class="modal-content">
    <div class="slide">
        <img src="media/pictures/Calm cold day.webp" class="image-slide lazy_load" alt="N21AP Cold Day" title="N21AP Cold Day" />
    </div>
    <div class="slide">
        <img src="media/pictures/N21AP cold day.webp" class="image-slide lazy_load" alt="N21AP In Snow" title="N21AP In Snow" />
    </div>    
    <div class="slide">
        <img src="media/pictures/Getting mission ready.webp" class="image-slide lazy_load" alt="Entering Mission Data" title="Entering Mission Data" />
    </div>
      <div class="slide">
        <img src="media/pictures/Final walkaround.webp" class="image-slide lazy_load" alt="Pre-Takeoff Checks" title="Pre-Takeoff Checks" />
    </div>      
    <div class="slide">
        <img src="media/pictures/SMART-1 team cold day.webp" class="image-slide lazy_load" alt="N21AP and SMART-1 Team In Snow" title="N21AP and SMART-1 Team In Snow" />
    </div>    
    <div class="slide">
        <img src="media/pictures/N21AP getting fuel.webp" class="image-slide lazy_load" alt="N21AP Refueling"  title="N21AP Refueling" />
    </div>    
    <div class="slide">
        <img src="media/pictures/N55PQ preflight checks.webp" class="image-slide lazy_load" alt="N55PQ Pre-flight" title="N55PQ Pre-flight" />
    </div> 
    <div class="slide">
        <img src="media/pictures/Entering mission data.webp" class="image-slide lazy_load" alt="Entering Flight Plan" title="Entering Flight Plan" />
    </div>    
    <div class="slide">
        <img src="media/pictures/Operations Center.webp" class="image-slide lazy_load" alt="SMART-1 Operations Center" title="SMART-1 Operations Center" />
    </div> 
    <div class="slide">
        <img src="media/pictures/SMART-1 N78AP close up.webp" class="image-slide lazy_load" alt="N78AP Low Pass" title="N78AP Low Pass" />
    </div> 
    <div class="slide">
        <img src="media/pictures/SMART-1 downtime fun.webp" class="image-slide lazy_load" alt="SMART-1 downtime fun" title="SMART-1 downtime fun" />
    </div> 
    <div class="slide">
        <img src="media/pictures/Park SMART-1.webp" class="image-slide lazy_load" alt="Park SMART-1" title="Park SMART-1" />
    </div>
  
    <a class="previous" onclick="changeSlide(-1)">&#10094;</a>
    <a class="next" onclick="changeSlide(1)">&#10095;</a>
  
    <div class="dots">
      <div class="col">
        <img src="media/pictures/Calm cold day thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(1)" alt="N21AP Cold Day" />
      </div>
      <div class="col">
        <img src="media/pictures/N21AP cold day thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(2)" alt="N21AP In Snow" />
      </div>
      <div class="col">
        <img src="media/pictures/Getting mission ready thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(3)" alt="N78AP Entering Mission Data" />
      </div>
        <div class="col">
        <img src="media/pictures/Final walkaround thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(4)" alt="Pre-Takeoff Checks" />
      </div>
      <div class="col">
        <img src="media/pictures/SMART-1 team cold day thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(5)" alt="N21AP and Smart-1 Team In Snow" />
      </div>
      <div class="col">
        <img src="media/pictures/N21AP getting fuel thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(6)" alt="N21AP Refueling" />
      </div>
      <div class="col">
        <img src="media/pictures/N55PQ preflight checks thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(7)" alt="N55PQ Pre-Flight" />
      </div>
        <div class="col">
        <img src="media/pictures/Entering mission data thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(8)" alt="N78Ap Low Pass" />
      </div>
      <div class="col">
        <img src="media/pictures/Operations Center thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(9)" alt="SMART-1 Operations center" />
      </div>
        <div class="col">
        <img src="media/pictures/SMART-1 N78AP close up thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(10)" alt="SMART-1 N78AP close up" />
      </div>
        <div class="col">
        <img src="media/pictures/SMART-1 downtime fun thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(11)" alt="SMART-1 downtime fun" />
      </div>
        <div class="col">
        <img src="media/pictures/Park SMART-1 thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(12)" alt="Park SMART-1" />
      </div>
    </div>
  </div>
    </div>