javascript - formulario - ¿Cómo cargar los archivos incluidos en un Modal w3school(en una plantilla de Django) solo al hacer clic?

modal dinamico bootstrap

Question

Soy muy nuevo con javascript y html así que por favor tengan paciencia conmigo. Estoy usando CSS Modals de W3schools para incrustar presentaciones de diapositivas que deben cargarse al hacer clic.

<button onclick="document.getElementById(''id01''.style.display=''block''" class="w3-btn w3-round-large w3-black w3-small w3-padding-small">SLIDESHOW</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">

Estoy cargando muchas presentaciones de diapositivas que proporciono a una plantilla de Django con mis puntos de vista

<button onclick="document.getElementById(''id|add:{{ lesson.id }}'').style.display=''block''" class="w3-btn w3-round-large w3-black w3-small w3-padding-small">SLIDESHOW</button>
<div id="id|add:{{ lesson.id }}" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<div class="w3-content w3-display-container" >
{% for slideimage in lesson.images %}
<img class="{{ lesson.title }}" src= "{% static lesson.path|add:slideimage %}" style="width:100%">
{% endfor %}
<button class="w3-button w3-black w3-display-left" onclick="plusDivs{{ lesson.id }}(-1)">&#10094;</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs{{ lesson.id }}(1)">&#10095;</button>
<span onclick="document.getElementById(''id|add:{{ lesson.id }}'').style.display=''none''" class="w3-button w3-display-topright">&times;</span>
</div>
<script>
var slideIndex = 1;
showDivs{{ lesson.id }}(slideIndex);
function plusDivs{{ lesson.id }}(n) {
showDivs{{ lesson.id }}(slideIndex += n);
}
function showDivs{{ lesson.id }}(n) {
var i;
var x = document.getElementsByClassName("{{ lesson.title }}");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
</div>
</div>
</div>
</div>
{% endfor %}
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</div>
</div>
</div>
{% endfor %}

Mi problema es que cuando abro la página, las plantillas precargan todos los archivos asociados con todas las presentaciones de diapositivas que se incluyen en la página. Quiero que los archivos incluidos en una presentación de diapositivas se carguen solo cuando el Modal, incluida la presentación de diapositivas, se active al hacer clic.

Una pregunta similar (también aquí ) pregunta cómo resolver el mismo problema con Boostrap. Estoy buscando una solución similar con W3.css. Estas son preguntas más generales relacionadas con cargar modales al hacer clic, y evitar precargar archivos con jquery o con django, pero no tengo idea de qué tipo de técnica debo usar para resolver mi problema con el W3school Modal incrustado en la plantilla de Django.