Btukfyl

I am currently using this Bootstrap template:
Bootstrap Agency Template

The template uses modals and does not show anything on the page until everything is fully loaded. (Blank white page until all images are loaded.)

I am looking for a way to prevent images within modals from loading until the modal is clicked on. I want to reduce load time.

Thank you in advance for any help.

<div class="col-md-3 col-sm-4 portfolio-item">

        <a class="portfolio-link" data-toggle="modal" href="#logo">

          <div class="portfolio-hover">

            <div class="portfolio-hover-content">



            </div>

          </div>

          <img class="img-fluid" src="img/logo-t.jpg" alt="">

        </a>



      </div>





 <!-- Modal 5 -->

<div class="portfolio-modal modal fade" id="logo" tabindex="-1" role="dialog" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="close-modal" data-dismiss="modal">

        <div class="lr">

          <div class="rl"></div>

        </div>

      </div>

      <div class="container">

        <div class="row">

          <div class="col-lg-10 mx-auto">

            <div class="modal-body">

              <!-- Project Details Go Here -->



              <img class="img-fluid d-block mx-auto" src="img/logos.jpg" alt="">



              <button class="btn btn-primary" data-dismiss="modal" type="button">

                <i class="fas fa-times"></i>

                Close Project</button>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>