Optimizar de carga pagina

[Alexis88]

Bienvenido a Foros del Web.

Lo primero que debes hacer es colocar a cada <div> en el espacio comprendido por cada <li> o llevarlo hacia otro contenedor. Esto es porque, el elemento <ul>, debe usarse solo para listar a elementos <li> de forma desordenada; de allí viene su nombre: unordered list (lista desordenada). Es más una cuestión semántica que de funcionamiento.

Suponiendo que hiciste lo primero, te quedaría algo similar a esto:

Código HTML:

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

Lo que ahora tienes que hacer es reemplazar al atributo id de cada <div> por el atributo class u otro. Esto es porque no debe repetirse el valor de un id en el documento HTML. Se trata de un valor único e irrepetible.

Realizando dicho cambio, el esquema quedaría muy parecido a esto:

Código HTML:

<ul>
    <li>
        <a href="#modal">LINK</a>
        <div class="modal">
            <iframe src="ejemplo.html"></iframe>
        </div>
    </li>
    <li>
        <a href="#modal">LINK 2</a>
        <div class="modal">
            <iframe src="otroEjemplo.html"></iframe>
        </div>
    </li>
</ul>
 

La idea de hacer estos cambios es que se le pueda dar un clic a cualquier enlace de la lista y se cargue el contenido del <iframe> contenido en el <div> que se encuentra insertado en el mismo elemento <li> en el que está el enlace y, una estructura como esta, ayuda a que el proceso mediante JavaScript sea más sencillo. Dado a que los enlaces tienen como propósito enlazar hacia otra dirección electrónica o anclar en algún elemento del documento (mover a la barra de desplazamiento vertical hasta la posición del elemento cuyo id sea igual al valor del atributo href del enlace pulsado), lo aconsejable es que utilices otro elemento. Por ejemplo, podrías usar elementos <span> a los cuales les asignarías una clase para poder identificarlos y diferenciarlos de otros elementos <span> que pudiera haber en otras secciones del documento. Y como la idea es que el contenido de cada <iframe> no cargue al inicio, podrías almacenar el valor de la ruta en un atributo personalizado.

Así es como quedaría el esquema hasta este punto:

Código HTML:

<ul id="lista">
    <li>
        <span class="enlace">Modal 1</span>
        <div class="modal">
            <iframe data-src="ejemplo.html"></iframe>
        </div>
    </li>
    <li>
        <span class="enlace">Modal 2</span>
        <div class="modal">
            <iframe data-src="otroEjemplo.html"></iframe>
        </div>
    </li>
</ul>
 

Añadí un id al elemento <ul> para poder tomarlo fácilmente en el código JavaScript. Teniendo esto, ya podemos pasar a la parte funcional.

Ahora bien, como tenemos a varios elementos similares y quieres que se cargue el contenido de cada <iframe> al darle un clic al <span> que se encuentra en cada <li>, te aconsejo delegar dicho evento (el evento click) al elemento <ul>; de esta forma, cuando este se produzca en cualquier parte del mismo (la lista), se verificará que el elemento objetivo (el elemento al que se le dio el clic) posea la clase "enlace"; de ser así, se cargará el contenido del <iframe> vecino a partir del valor del atributo personalizado que este posea.

Esto sería así:

Código Javascript:

//Luego de cargar la página
document.addEventListener("DOMContentLoaded", function(){
    //Delegamos el evento click al elemento <ul>
    document.querySelector("#lista").addEventListener("click", function(event){
        var elementoAfectado = event.target; //Capturamos al elemento afectado por el clic
        if (elementoAfectado.className == "enlace"){ //Si la clase del elemento es igual a "enlace"
            var elLi = elementoAfectado.parentNode, //El elemento padre del <span>, o sea, el <li>
                elDiv = elLi.querySelector(".modal"), //El elemento <div> contenido en el <li>
                elIframe = elDiv.querySelector("iframe"), //El elemento <iframe> contenido en el <div>
                laRuta = elIframe.dataset.src; //La ruta contenida en el atributo personalizado del <iframe>            
            elIframe.src = laRuta; //Asignamos la ruta al <iframe> y procederá a cargar el contenido
        }
    }, false);
}, false);
 

Luego de cargar el DOM o modelo de objetos del documento (evento DOMContentLoaded), se procede a registrar al evento click en el elemento <ul> al cual tomamos por el valor de su id. Al producirse este, se ejecutará una función anónima que ejecutará un conjunto de instrucciones. En este caso, se tomará al elemento afectado por el evento y se verificará que posea la clase "enlace" para determinar si se trata de alguno de los elementos <span> de la lista. Al cumplirse la condición, se procede a tomar al elemento que contiene al <li>, se captura al elemento <div> contenido, al <iframe> insertado en el <div>, al valor del atributo personalizado del <iframe> y, finalmente, se asigna este último valor al atributo src del <iframe> para que pueda cargar el contenido respectivo.

Ejemplo en vivo

Algunas referencias para entender mejor el código:

• Mediante el método .addEventListener(), registramos un evento en un elemento del documento.
• El método .querySelector() permite seleccionar un elemento contenido en el elemento que se especifique antes del punto.
• En la variable event se encuentra el objeto del evento, mismo que posee el atributo target que es en el que se almacena una referencia hacia el elemento directamente afectado por el evento producido.
• La propiedad parentNode registra una referencia hacia el elemento que contiene al elemento asociado mediante el punto: element.parentNode (elemento que contiene a element).

Por cierto, si realizaras peticiones asíncronas (AJAX), también cargarías de peticiones al servidor.