Lazy Loading de Videos con JavaScript y Modales

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0021:44

Lazy Loading de Videos con JavaScript y Modales

Curso de Optimización Web

Clase 24 de 38

Clase 24 / 38

Recursos

¿Cómo implementar lazy loading en JavaScript?

Si estás buscando optimizar el rendimiento de tu aplicación web y mejorar la experiencia del usuario, una técnica avanzada conocida como "lazy loading" podría ser tu solución ideal. Lazy loading, o carga perezosa, se refiere a diferir la carga de ciertos elementos de tu página web hasta que el usuario realmente los necesite. Esto no solo reduce el tiempo de carga inicial de la página, sino que también economiza recursos del navegador. A continuación, te guiaremos paso a paso para implementar lazy loading, enfocándonos en cómo integrar un modal para reproducir videos.

¿Por dónde empezar con lazy loading?

El primer paso es identificar las partes de tu proyecto que no son necesarias de inmediato al cargar la página. En este caso práctico, cargaremos un modal solo cuando el usuario haga clic en un ítem para ver un video. Así evitamos redirigir al usuario a YouTube y lo mantenemos dentro de nuestra aplicación, mejorando la experiencia general.

¿Cómo agregar event listeners a tus elementos?

Para lograr la interacción dinámica, primero necesitamos escuchar los eventos de clic en nuestros elementos. Configuramos event listeners para detectar cuando el usuario hace clic en el botón de play dentro de un ítem:

Creación de archivos: Organiza tus recursos creando una nueva carpeta llamada modal, y dentro de ella un archivo index.js. Aquí definiremos nuestra función modalListener:
```
export function modalListener(event) {
    console.log('Se hizo clic.');
}
```
Integración con el index principal: Dentro de tu archivo principal index.js, importa la función y agrega el escuchador al botón de play:
```
import { modalListener } from './modal';

const allYouTubeLinks = document.querySelectorAll('.js-video-link');
allYouTubeLinks.forEach(link => {
    link.addEventListener('click', modalListener);
});
```
Esta estructura permite capturar cada clic y ejecutar la función asignada, que en este caso solo mostrará un log en la consola.

¿Cómo evitar el comportamiento predeterminado de los enlaces?

Es esencial que al hacer clic en el botón de play, no se realice la acción predeterminada de abrir el enlace en una nueva pestaña:

export function modalListener(event) {
    event.preventDefault();
    console.log('Se hizo clic.');
}

¿Cómo obtener el ID del video de YouTube?

Para interactuar con el contenido específico de cada elemento clicado, necesitamos extraer el ID del video desde el enlace. Supongamos que el enlace es similar a https://www.youtube.com/watch?v=ID_DEL_VIDEO:

Obteniendo el href: Modifica la función modalListener para extraer el valor del atributo href del elemento.

export function modalListener(event) {
    event.preventDefault();
    const link = event.currentTarget;
    const videoId = new URL(link.href).searchParams.get('v');
    console.log(videoId);
}

¿Cómo implementar la librería de modal?

El siguiente paso implica instalar e integrar una librería para el modal. Este proceso normalmente incluiría:

Instalación: Agrega la dependencia de la librería de modal mediante npm o un gestor de paquetes similar.

Importación y configuración: Una vez instalada, importa la librería en tu archivo modal/index.js y configura su uso:

import someModalLibrary from 'some-modal-library';

export function modalListener(event) {
    event.preventDefault();
    const link = event.currentTarget;
    const videoId = new URL(link.href).searchParams.get('v');

    someModalLibrary.open({
        content: `<iframe src="https://www.youtube.com/embed/${videoId}" frameborder="0"></iframe>`
    });
}

Estas configuraciones iniciales nos permiten controlar cómo y cuándo ciertos contenidos se cargan, optimizando así la eficiencia de nuestros recursos y brindando una experiencia más fluida al usuario. En un próximo paso, aseguraremos que nuestra librería de modal se cargue de manera lazy, solo cuando sea necesario.

Conclusión práctica

A través de estos pasos, hemos aprendido a aplicar lazy loading para mejorar el rendimiento de una aplicación web. Este enfoque no solo optimiza la carga de la página, sino que también mejora la experiencia del usuario. Te animo a que sigas experimentando con estas técnicas en tus proyectos. ¡Continúa aprendiendo y mejorando!

Comentarios (12)12 comentarios

Armando Rivera

Hace 6 años

En carouselItem.js agregar la clase carousel-item en e div

h(
    'div.carousel-item',
    h('img', { src: imageUrl, alt: '', loading: 'lazy' }),

Instalar la dependencia de lozad

npm install --save lozad

En el index.js que está en la carpeta src

import lozad from 'lozad'
...
...
...
!(async function(document) {
  const mountReference = document.querySelector('.main').lastElementChild

  if (!mountReference) {
    return 0
  }
...
...
...

// Add lazy loading
    const carouseImages = document.querySelectorAll('.carousel-item__img');
    const observer = lozad(carouseImages);
    observer.observe();

    const allYouTubeLinks = document.querySelectorAll('.js-video-link');
    // console.log(allYouTubeLinks);
    allYouTubeLinks.forEach((link) => {
      link.addEventListener('click', modalListener);
    });

})(document, window)

En el index.js del modal

export const modalListener = (event) => {
    event.preventDefault();
    const link = event.target;
    console.log(link);
}

Eliseo Ávila

Thanks!!!!!!!!

Luis Felipe Medina Rodriguez

bubble up

fermin martin

Me encanta la forma de usar devTools (elements, console, sources) para debugear. Muy buena clase!!👌🤓

Valentín Eduardo González Morales

Hace 4 años

event.target vs event.currentTarget

Cuando se agrega un evento a un elemento del DOM, tienen un propiedad llamada bubble, que hace referencia a como las burbujas suben en el agua y lo que hace es que cuando se interactúa con un elemento que tiene un ++event listener++, el elemento ejecutará todos los eventos de todos los elementos padres en orden ascendente (por eso se hace referencia a las burbujas). Suponiendo que tenemos la siguiente estructura:

<div class="parent" onclick="handleClick">
	<p>Children</p>
</div>

	const handleClick = (e) => {
		const elementoAlQueSeLeHizoClick = e.target // se refiere a la etiqueta <p>
		const elementoQuePoseeElManejadorDeEventos = e.currentTarget // se refiere al div
	}

si se le agrega un evento al div pero se da click en el párrafo, el elemento seleccionado será el párrafo y ese se convertirá en el target seleccionado. Debido al bubble, al seleccionar parráfo, éste dispararía el evento del párrafo (pero no tiene), asi que sigue y dispara el evento del padre.

En este ejemplo no hay una forma directa de solamente seleccionar el div ya que es exactamente del mismo tamaño del párrafo, asi que si queremos que el manejador de eventos pueda acceder al div cuando damos click al párrafo entonces se usaría currentTarget.

event.currentTarget hace referencia al elemento al cual tiene ligado la funcion que maneja el evento.

IRIDIAN GUADALUPE CARRERA MONDRAGÓN

Hace 5 años

NodeList -a- Array:

NodeList NO trae elementos como map, filter, mientras que un array si los trae.

Una forma de++ pasar del nodelist hacia un array++ es++ hacer la configuración en babel en webpack para utilizar el spreed operator sobre un array++: […allYoutubeLinks].filter

forEach se encuentra disponible para arrays tanto como NodeList.

Remix Zapata

Recordando el Curso de Manipulación del DOM (que el mismo profesor de este curso lo explica), en una clase explica el porqué no se debería agregar muchos addEventListener. click para ir a la clase.

En base a eso, lo reemplazaría por:

// carousel es el contenedor de los items
// <div class="carousel__container" id="carousel"> </div>
const carousel = document.querySelector('#carousel');

carousel.addEventListener('click', (e) => {
	// <img class="carousel-item__details--img" id="open-modal" src="assets/play-icon.png" alt="Play">
	if (e.target.id === 'open-modal') modalListener(e);
});

Lo demás es lo mismo:)

takeshi hp

cambien target por currentTarget

Paolo Joaquin Pinto Perez

Lo que hicimos en la clase, bueno al menos yo(tuve que implemetar el lazy load como lo hizo el profesor por eso puede que haya código repetido):😅

instale dependencia:

npm install lozad -S

Creamos en la carpeta src del proyecto la carpeta modal y dentro de modal se creó el archivo index.js.
en src/modal/index.js se escribió:

export const modalListener = (event) => {
    event.preventDefault();
    const img = event.target
    const link = img.parentElement;
    console.log(link.href);
}

en src/index.js se agregó el siguiente código:

import lozad from 'lozad';
import { modalListener } from './modal';
...
...
    .insertAdjacentElement(
      'afterend',
      Carousel({
        itemsList: popular,
      })
    )

    /* ENTRE ESTA LINEA!! */

    // Add lazy loading
    const carouseImages = document.querySelectorAll('.carousel-item__img');
    const observer = lozad(carouseImages);
    observer.observe();
    
    const allYouTubeLinks = document.querySelectorAll('.js-video-link');
      // console.log(allYouTubeLinks);
      allYouTubeLinks.forEach((link) => {
        link.addEventListener('click', modalListener);
    });

    /* Y ENTRE ESTA LINEA */
})(document, window)

y por ultimo se agrego en el archivo CarouselItem.js:

SE AGREGÓ EL ATRIBUTO CLASSNAME A LA ETIQUETA 'a', este código comienza como en la linea 8, al menos en mi editor.

const Controls = ({ slug, youtubeVideoId }) =>
  h(
    'div',
    h(
      'a', // esta 'a' ó 'a.js-video-link y QUITAMOS EL ATRIBUTO className'
      {
        className: 'js-video-link',
        href: `https://www.youtube.com/watch?v=${youtubeVideoId}`,
        title: 'Watch trailer',
        target: '_blank',
        rel: 'noreferrer',
      },

y ya! , me gustaria feedback, para saber donde me equivoque, gracias :D

Arturo José Báez Uribe

En que momento se agrego la libreria de lozad al proyecto? por que se hizo? que tipo de configuraciones son necesarias? Vengo siguiendo todos los videos y no lo tengo en mi proyecto

Alfredo Guillot

Hola Arturo! En uno de los videos dice que él utilizaría esa librería pero que nosotres eramos libres de elegir que utilizar. Por eso no se muestra su implementación. Era para hacer lo de lazy load en las imagenes.

La documentación de Lozad: https://github.com/ApoorvSaxena/lozad.js

Jonathan 🦑 Alvarez

Profesor

Exacto como dice sistemasChozas :D

Como no era obligatorio podían utilizar la que quisieran

Wilmion Navarrete

Para el auto completado

export const modalLister = (event = new Event) => {}

Kenneth Angulo L

Hace un mes

¿Cuándo debo convertir NodeList a Array?

Debes convertir un NodeList a un Array cuando necesites manipular los elementos del DOM utilizando métodos funcionales avanzados que no están disponibles de forma nativa en los NodeLists, como map(), filter(), o reduce().

Cuando usas querySelectorAll, el navegador te devuelve un NodeList. Aunque las versiones modernas de JavaScript permiten usar forEach() directamente sobre un NodeList para iterar de forma sencilla, esta estructura es limitada. Si tu objetivo es, por ejemplo, filtrar solo los enlaces que contienen una URL específica y luego transformar esos datos, el NodeList se quedará corto. Puedes realizar esta conversión fácilmente utilizando el spread operator ([...misNodos]) o Array.from(misNodos). Al hacerlo, desbloqueas todo el arsenal de métodos de los arrays, permitiéndote escribir un código mucho más declarativo, limpio y poderoso.

Naldo Duran

👌

Entendiendo el rendimiento

Optimización Avanzada de Páginas Web con Técnicas Prácticas

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Métricas de Experiencia de Usuario: LCP, FID y CLS

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

Optimización de Carga de Modales con Lazy Loading en Webpack

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

Configuración y despliegue de sitios web con Netlify y Github Actions

Automatización de despliegues con Github Actions y Cron en Netlify

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

Creación de Pull Request y Auditorías con Github Actions

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Lazy Loading de Videos con JavaScript y Modales