Estoy desarrollando un sitio web para vender artesanías prácticas para que los usuarios esperen imágenes de alta calidad por producto. Debido a problemas relacionados con el SEO, pienso en cargar la imagen de forma asíncrona y justo cuando el usuario accede a la miniatura de cada producto. eso; ¿Hay algún evento en javascript para detectar eso? o tengo que calcular por pixeles o algo asi?
Lo que está buscando se llama "carga diferida". Lazy Loading significa que los recursos requeridos solo se cargan una vez que el usuario realmente los necesita. En este ejemplo, el usuario solo necesita la imagen una vez que la imagen está realmente en la ventana gráfica (los elementos visibles en la pantalla)
La forma más fácil para los navegadores basados en Chromium y Firefox es usar el atributo de "carga" de la etiqueta img y establecer el valor en "perezoso". Ejemplo: img loading=lazy src="enlace"
Esto funcionará para la mayoría de los casos. Sin embargo, si desea tener el control de la funcionalidad detrás de él, lo que está buscando se llama "Observador de intersección". Con esto puedes hacer muchas cosas relacionadas con los elementos y la ventana gráfica. Por ejemplo, qué tan lejos está un elemento de la ventana gráfica, o cuánto porcentaje del elemento está realmente en la ventana gráfica.
Si desea un video realmente corto de 15 minutos que explique la base del Intersection Observer, puedo recomendar este video de YouTube:
https://www.youtube.com/watch?v=2IbRtjez6ag
¡Espero que esto sea suficiente para ayudarte con tu problema!