Optimizar de carga pagina

[Alexis88]

Estimado Gunet:

Paso a responder los puntos señalados:

1. Si cambias al <span> por un elemento <img>, <label> o el que fuera, y mantuvieras la clase que le asigné a los <span> del ejemplo, la funcionalidad seguiría siendo la misma.

Código HTML:

<ul id="lista">
    <li>
        <img src="imagen1.jpg" class="enlace" />
        <div class="modal">
            <iframe data-src="ejemplo.html"></iframe>
        </div>
    </li>
    <li>
        <img src="imagen2.jpg" class="enlace" />
        <div class="modal">
            <iframe data-src="otroEjemplo.html"></iframe>
        </div>
    </li>
</ul>
 

2. Te aconsejo dejar la estructura como en el punto anterior y tener un <div> externo que serviría de fondo para todos los casos.

Código HTML:

<ul id="lista">
    <li>
        <img src="imagen1.jpg" class="enlace" />
        <div class="modal">
            <iframe data-src="ejemplo.html"></iframe>
        </div>
    </li>
    <li>
        <img src="imagen2.jpg" class="enlace" />
        <div class="modal">
            <iframe data-src="otroEjemplo.html"></iframe>
        </div>
    </li>
</ul>
 
<div id="fondo"></div>
 

Con unos cuantos estilos, le darías la apariencia que necesitas:

Código CSS:

#fondo{
    position: absolute; /* Posición absoluta para que pueda ser ubicado sin tomar en cuenta a los demás elementos */
    background-color: black; /* Fondo de color negro */
    display: none; /* Inicialmente, el fondo no debe verse */
    top: 0; /* En el eje Y, se ubicará partiendo del borde superior del documento */
    left: 0; /* En el eje X, se ubicará partiendo del borde izquierdo del documento */
    width: 500%; /* Ancho amplio para que sea visible cuando se muestre un <iframe> ubicado muy abajo */
    height: 500%;   /* Altura amplia para que sea visible cuando se muestre un <iframe> ubicado muy abajo */
}
 

Y tan solo sería cuestión de que, cuando vayas a mostrar un <iframe>, selecciones al fondo, lo hagas visible (propiedad display) y le asignes una opacidad (propiedad opacity) mayor a cero y menor a uno para obtener un efecto de transparencia. También te aconsejo añadir un botón o imagen al cual, una vez que se le dé un clic, oculte tanto al <iframe> que se está mostrando como al fondo para que así el usuario pueda seleccionar otro. Debes tener en cuenta que, este último botón, también deberá ser mostrado y ocultado junto con cada <iframe> y el fondo.

Para que no se muestren las barras de desplazamiento al momento de mostrar el fondo (porque es más grande que la vista del documento), solo tendrías que ocultarlas mediante la propiedad overflow:

Código JavaScript:

document.body.overflow = "hidden";
 

Y volver a mostrarlas cuando ocultes al <iframe> y el fondo:

Código JavaScript:

document.body.overflow = "auto";
 

Para centrar al <iframe>, podrías asignarle una posición absoluta (así como el fondo) y aplicarle los siguientes estilos:

Código Javascript:

elIframe.style.top = window.innerHeight / 2 - elIframe.offsetHeight / 2 + window.scrollY + "px";
elIframe.style.left = window.innerWidth / 2 - elIframe.offsetWidth / 2 + window.scrollX + "px";
 

De esta manera, el punto medio del <iframe> quedará en la misma ubicación del punto medio de la pantalla, centrándose completamente.

Como añadí un efecto de transición a todos los elementos para que los cambios de estilos (aunque no todos) se produzcan con un efecto de retardo, deberás centrar al <iframe> pasado el tiempo que se asignó a la propiedad transition en la hoja de estilos. En este ejemplo, fue de ".1s", es decir, cien milésimas de segundo; por lo tanto, necesitarás utilizar un temporizador para realizar el centrado efectivamente:

Código Javascript:

setTimeout(function(){
    //Centramos al <iframe>
    elIframe.style.top = window.innerHeight / 2 - elIframe.offsetHeight / 2 + window.scrollY + "px";
    elIframe.style.left = window.innerWidth / 2 - elIframe.offsetWidth / 2 + window.scrollX + "px";
}, 100);
 

Esto se debe a que, como se le asigna al <iframe> un ancho y alto en tiempo de ejecución, pasarán cien milésimas de segundo hasta que se complete el proceso, pero el centrado se ejecutará antes de que eso ocurra, por lo que, las medidas que se toman en las dos líneas que realizan el centrado, no serán las cifras finales.

Ejemplo en vivo (sin el botón para ocultar todo)

Algunos enlaces de referencia.

• Objeto window.
• Propiedades innerWidth e innerHeight.
• Propiedades scrollX y scrollY.
• Propiedades offsetWidth y offsetHeight.

Si tienes otra duda, consúltanos con total confianza.