Una de las mejores mejoras a html en los últimos años fue el atributo de carga="lazy" que puedes agregar a las imágenes (también iframes) que indicará a los navegadores que no carguen el imagen hasta que esté en la ventana gráfica.

Muy sencillo, muy útil. Pero, ¿no sería fantástico si pudieras hacer esto también con los guiones? Para que puedas cargar tus componentes de forma perezosa, sólo si y cuando realmente sean necesarios...

Bueno, otra característica que tiene el elemento es la capacidad de ejecutar un script después de que la imagen se cargue (o no se cargue) con los atributos onload y onerror.

Esta "devolución de llamada" de carga solo se activará cuando se cargue esa imagen, y si la imagen se carga de forma diferida, se activará solo cuando la imagen esté en la ventana gráfica. ¡Y voilá! Un script cargado de forma diferida.

Desafortunadamente, así, no sirve de mucho. En primer lugar, tendrá una imagen no deseada en su página y, en segundo lugar, deberá insertar el javascript que desea ejecutar, lo que frustra un poco el propósito de la carga diferida. Entonces, hagamos algunos cambios para mejorar esto.

La imagen en sí puede ser cualquier cosa o, más importante aún, nada. Como mencioné anteriormente, existe la devolución de llamada onerror, que, como sugiere el nombre, se activará cuando la imagen no se carga.

Esto no significa que debas apuntar el src a una imagen inexistente, eso resultaría en una consola llena de errores 404 rojos sobre imágenes faltantes, y nadie quiere eso.

La devolución de llamada onerror también se activa si la imagen src no es en realidad una imagen, y la forma más sencilla de hacerlo es "codificar mal" una imagen usando el formato data:. ¿Esto también tiene la ventaja de no llenar la consola con advertencias de imágenes faltantes?

Esto seguirá dando como resultado que la página tenga la miniatura de "imagen rota", pero llegaremos a eso.

Ok, pero aún necesitamos incluir el javascript que queremos ejecutar, entonces, ¿cómo solucionamos eso?

Bueno, ahora que el soporte del módulo ES es casi universal, podemos usar la muy poderosa técnica de carga de javascript event-import-then-default para cargar un script después de que se haya activado un evento, así:

Nota: Esto también funciona para eventos onclick, onchange, etc.
Nota: Los guiones bajos son solo una forma abreviada de acceder al Módulo, también puedes escribir .then(Module => Module.default(this))

Bien, entonces, ¿¡qué está pasando aquí!?

Primero, echemos un vistazo a cómo se vería algún componente:

// some-component.js

export default element => {
    element.outerHTML = `
        

            
Hello world!
        
    `;
}

Entonces, habrás notado que en la devolución de llamada onerror, pasé esto como argumento para la exportación predeterminada. La razón por la que hice este (¿disculpe el juego de palabras?) fue para darle al guión el que lo llamaba, ya que en este (¿lo hice de nuevo?) contexto esto = .

Ahora puedes simplemente usar element.outerHTML para reemplazar la imagen rota con tu marcado html y ahí lo tienes, ¡scripts con carga diferida! ?

Almacenamiento en caché y paso de argumentos

Si utiliza esta técnica más de una vez en una página, deberá pasar un índice de "eliminación de caché" o un número aleatorio a los datos:, por ejemplo, algo como:

La cadena después de ":" puede ser cualquier cosa, siempre y cuando sean diferentes.

Una forma muy sencilla de pasar parámetros a la función sería usar el atributo data-something en el html así:

Dado que pasamos esto a la función, puedes acceder a los atributos de datos de esta manera:

export default element => {
    const { message } = element.dataset
    element.outerHTML = `
        

            
${message}
        
    `;
}

¡Déjame saber lo que piensas en los comentarios! ❤️