CODEWITHSUNDEEP
jquerytwitter-bootstrap
Kyle Drew
Kyle Drew

Reputation: 370

Only Load Modals when activated (one at a time)

I'm trying to keep the modals from loading, I'm using Jquery Lazy with a bootstrap 4 modal. I can get the modals to not load on page load but the problem I run into is when one modal is activated, they all load. I want to keep that from happening and have each modal only load when it is activated. I am looking at having over 300 modals (images that bring up a carousel modal) and I doubt someone will go through each modal on a regular basis. Any help is appreciated.

$('.modal').on("show.bs.modal", function() {
  $('img.lazy').each(function() {
    var img = $(this);
    img.attr('src', img.data('src'));
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.5/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.5/jquery.lazy.plugins.min.js"></script>
<div class="col-lg-3 col-md-3 col-sm-6">
  <div class="img-thumbnail image"><img data-toggle="modal" src="https://placeimg.com/200/120/any" data-target="#modal" class="img-fluid">
  </div>
  <h4>...</h4>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid carousel-container">
          <div class="container">
            <div class="row">
              <div class="col">
                <div class="carousel slide carousel-fade" id="carousel-">
                  <div class="carousel-inner">
                    <div class="active carousel-item" data-slide-number="0">
                      <img data-src="https://placeimg.com/450/250/any" class="lazy img-thumbnail"></div>
                  </div>
                </div>
              </div>
            </div>
            <hr>
            
          <!--/Slider-->
          <div class="row">
            <div class="col">
              <a class="carousel-selector" data-slide="0"><img data-src="https://placeimg.com/75/42/any" class="lazy img-thumbnail"></a>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Views: 614

Answers (1)

Kyle Drew
Kyle Drew

Reputation: 370

A more specific function needs to be used. This works perfectly.

$('.modal').on("show.bs.modal", function() {
$('.lazy', this).Lazy({bind: 'event', chainable: false});
});

You can also add a loading gif into the images using the src attribute and the plugin from jquery.lazy will switch the two when the actual image is loaded. So put the actual image in using data-src="actual image page" and on the same img tag put in a loading gif src="loading.gif"

Upvotes: 1

Related Questions