Mientras que la carga diferida de imágenes y videos tiene un rendimiento positivo y medible beneficios, no es una tarea para tomar a la ligera. Si te equivocas, podría pueden ser consecuencias no deseadas. Por lo tanto, es importante que tengas en cuenta lo siguiente importantes.
Presta atención a la línea de plegado
Puede ser tentador hacer una carga diferida en cada recurso multimedia de la página con JavaScript, pero debes resistir esta tentación. Todo lo que se encuentre sobre el no se debe cargar de forma diferida. Esos recursos deben considerarse críticos y, por lo tanto, debe cargarse de forma normal.
La carga diferida retrasa la carga de recursos hasta que el DOM es interactivo
cuando las secuencias de comandos terminan de cargarse y comienzan a ejecutarse. Para las imágenes debajo del
de la línea de plegado, esto está bien, pero los recursos críticos en la parte superior deben cargarse con
el elemento <img> estándar para que se muestren lo antes posible.
Por supuesto, hoy en día, la ubicación de la línea de plegado no es tan clara cuando los sitios web en tantas pantallas de distintos tamaños. El contenido que se encuentra en la parte superior de una laptop puede estar debajo en dispositivos móviles. No hay un consejo infalible para abordar este problema de forma óptima en todas las situaciones. Deberás realizar una de los recursos esenciales de tu página y cargar esas imágenes de forma a la moda.
Además, no recomendamos que seas tan estricto con la línea de plegado como el
para activar la carga diferida. Puede ser más ideal
para tus propósitos
y establecer una zona de búfer
un poco más abajo de la mitad superior de la página
se cargan mucho antes de que el usuario las desplace al viewport. Por ejemplo, el
La API de Intersection Observer te permite especificar una propiedad rootMargin en una
el objeto de opciones cuando creas una nueva instancia de IntersectionObserver. Esta
otorga de manera eficaz un búfer a los elementos, lo que activa un comportamiento de carga diferida antes de
el elemento está en el viewport:
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
// lazy-loading image code goes here
}, {
rootMargin: "0px 0px 256px 0px"
});
Si el valor de rootMargin es similar a los valores que especificaste para un CSS
propiedad margin, eso es porque lo es. En este caso, el
el margen inferior del elemento observado (el viewport del navegador de forma predeterminada, pero
esto se puede cambiar a un elemento específico con la propiedad root) se amplía a 256
píxeles. Esto significa que la función de devolución de llamada se ejecutará cuando un elemento de imagen sea
dentro de los 256 píxeles de la vista del puerto, y la imagen comenzará a cargarse
antes de que el usuario los vea.
Para lograr el mismo efecto en navegadores que no admiten Intersection Observe, usa código de control de eventos de desplazamiento y ajusta tu
getBoundingClientRect para incluir un búfer.
Cambio de diseño y marcadores de posición
La carga diferida de contenido multimedia puede generar cambios en el diseño si no se usan marcadores de posición. Estos cambios pueden desorientar a los usuarios y activar el costoso diseño de DOM que consumen recursos del sistema y contribuyen a los bloqueos. Como mínimo, considera usar un marcador de posición de color sólido que ocupe las mismas dimensiones que la imagen de destino o técnicas como LQIP o SQIP que sugieren el contenido de un medio antes de que se cargue.
Para las etiquetas <img>, src debería apuntar inicialmente a un marcador de posición hasta ese momento.
se actualiza con la URL de la imagen final. Usa el atributo poster en un
<video> para que apunte a una imagen de marcador de posición. Además, usa width y
Los atributos height en las etiquetas <img> y <video> Esto garantiza que
la transición de los marcadores de posición a las imágenes finales no cambiará el tamaño renderizado
del elemento mientras se carga el contenido multimedia.
Demoras en la decodificación de imágenes
Cargar imágenes grandes en JavaScript y soltarlas en el DOM puede vincular
principal, lo que provoca que la interfaz de usuario no responda durante un período breve
de tiempo mientras se produce la decodificación. Decodificación asíncrona de imágenes con decode
método
antes de insertarlos en el DOM puede reducir este tipo de bloqueos, pero
ten cuidado: Todavía no está disponible en todas partes y agrega complejidad a la lógica de carga diferida.
Si quieres usarlo, debes revisarlo. Abajo de los programas
Podrías usar Image.decode() con un resguardo:
var newImage = new Image();
newImage.src = "my-awesome-image.jpg";
if ("decode" in newImage) {
// Fancy decoding logic
newImage.decode().then(function() {
imageContainer.appendChild(newImage);
});
} else {
// Regular image load
imageContainer.appendChild(newImage);
}
Consulta este vínculo de CodePen para ver código similar al de este ejemplo en acción. Si la mayoría de las imágenes son bastante pequeñas, Esto puede no hacer mucho por ti, pero sin dudas puede ayudarte a reducir los bloqueos la carga diferida de imágenes grandes y su inserción en el DOM.
Cuando no se cargan los elementos
A veces, los recursos multimedia no se cargan por uno u otro motivo y se producen errores. de que ocurran cambios. ¿Cuándo podría suceder esto? Depende, pero hay una situación hipotética Tienes una política de almacenamiento en caché HTML durante un período breve (p.ej., cinco minutos) y el usuario visita el sitio o deja abierta una pestaña inactiva durante durante un período prolongado (p.ej., varias horas) y vuelve a leer el contenido. En algún punto de este proceso, se produce una reimplementación. Durante esta implementación, se nombre de recurso de imagen cambia debido al control de versiones basado en hash o se quitó por completo. Cuando el usuario carga lentamente la imagen, el recurso disponible y, por lo tanto, falla.
Si bien estos son casos relativamente inusuales, puede ser conveniente tener una copia de seguridad en caso de que la carga diferida falle. Para las imágenes, una solución de este tipo podría ser similar a esto:
var newImage = new Image();
newImage.src = "my-awesome-image.jpg";
newImage.onerror = function(){
// Decide what to do on error
};
newImage.onload = function(){
// Load the image
};
Lo que decidas hacer en caso de que se produzca un error dependerá de tu aplicación. Para ejemplo, podrías reemplazar el área del marcador de posición de la imagen con un botón que permita que el usuario intente cargar la imagen de nuevo o que simplemente muestre un mensaje de error en el área de marcador de posición de imagen.
También podrían surgir otras situaciones. Hagas lo que hagas, nunca es una mala idea una señal al usuario cuando se produce un error y, posiblemente, proporcionarle una acción realizar si algo sale mal.
Disponibilidad de JavaScript
No se debe suponer que JavaScript está siempre disponible. Si vas a
imágenes de carga diferida, considera ofrecer lenguaje de marcado de <noscript> para que muestre imágenes en
JavaScript no está disponible. El ejemplo de resguardo más simple posible implica
Usar elementos <noscript> para publicar imágenes si JavaScript está desactivado:
Si JavaScript está desactivado, los usuarios verán ambas imágenes: la imagen de marcador de posición y la
imagen contenida con los elementos <noscript>. Para sortear esto, coloca
Una clase de no-js en la etiqueta <html> de la siguiente manera:
<html class="no-js">
A continuación, coloca una línea de la secuencia de comandos intercalada en la <head> antes de las hojas de estilo.
se solicitan a través de etiquetas <link> que quitan la clase no-js de <html>.
si JavaScript está activado:
<script>document.documentElement.classList.remove("no-js");</script>
Por último, usa CSS para ocultar elementos con una clase diferida cuando JavaScript no está disponible:
.no-js .lazy {
display: none;
}
Esto no impide que se carguen las imágenes de marcador de posición, pero el resultado es más lo ideal. Las personas que tienen JavaScript desactivado obtienen algo más que un marcador de posición imágenes, lo que es mejor que los marcadores de posición y no tiene contenido significativo de imágenes en todos.