Load modal content not before modal is shown

Question

Okay, so I have a simple CSS-styled modal, shown upon hitting a button via jScript. This is the jScript:

<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

SOURCE

Since I will have a LOT of these things on the page, it is neccessary that the contents (mostly huge pictures) of the modals do not load until the respective modal is actually displayed. As far as I know I will need to do this via jQuery but I can't seem to find any good snippet for this.

Thanks in advance

Answer 1

The solution is to set image source when you click the button in order to show modal.

You can set image source with javascript, using document.querySelector() method.

document.querySelector('.modal-content img').src=src;

Or, with jquery library, using .attr() method.

$('.modal-content').find('img').attr('src',src);

var modal = document.getElementById('myModal');
var src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxPY1VmPOqgQip3ku3TUrx5g_uryG63qlN9iDBaXkWkTrT466fqA";
// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
    //document.querySelector('.modal-content img').src=src;
    $('.modal-content').find('img').attr('src',src);
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <img src=""/>
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

UPDATE. The solution with more images.

var modal = document.getElementById('myModal');
var src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxPY1VmPOqgQip3ku3TUrx5g_uryG63qlN9iDBaXkWkTrT466fqA";
// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
    $('.modal-content').find('img').each(function(){
        $(this).remove();
    });
  for(i=0;i<100;i++){
     $('.modal-content').append('<img src=""/>');
  }
  $('img').attr('src',src);
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

Answer 2

There is a great plugin for this problem called imagesLoaded by desandro:

https://github.com/desandro/imagesloaded

The plugin is used like this (much better documentation on the GitHub page):

$('#container').imagesLoaded( function() { // images have loaded });

Also here is a jQuery demo, and here is a vanilla JS demo.