Hola gente que tal, este es mi primer post.
Les cuento que mis conocimientos son básicos y solamente de HTML5 y CSS3 que es lo que he estado "estudiando" de internet hace ya varios meses, tengo claro que esto solamente me servirá para poder diseñar la pagina, enmaquetar y hacer que se vea linda pero no hacerla interactiva o "real".

Después de muchos meses de ir practicando, viendo tutoriales y leyendo en algún que otro foro, me veo en la obligación de aprender javascript ya que creo es el siguiente paso, lo primero que me gustaría aprender (y no se si estoy en en lenguaje correcto) es aprender a optimizar la carga de contenido, mi caso es el siguiente:

Código :

<ul>
     <li> 
          <a href="#modal"> LINK </a>   
     </li>
     <div id="modal">
           <iframe src="contenido_del_modal.html">
          </iframe>
     </div>
   
   <li>
      ...
   </li>

</ul>


En esa lista <ul> tengo muchos <li>, cada uno de ellos tiene un link el cual me lleva a un div que esta abajo al cual llame "modal", ese modal en su totalidad es otro archivo .html el cual tiene contenido, fotos, videos, texto, etc.
El problema se me da cuando tengo unos 15 <li> y cada uno de ellos con sus <iframe>
Que solución le darían ustedes para que se cargara cada <iframe> solamente cuando doy click en LINK que me lleva a "modal" ?

Me gustaría que me mencionaran que estoy haciendo mal, como lo optimizarían o si esto se puede arreglar con javascript, si se puede y no quieren escribir todo un código, decirme palabras clave para googlear y saber como arrancar porque estoy muy perdido al no saber nada.

Saber que buscar, me motivaría para aprender de una vez javascript!

Saludos