Tengo una imagen que quiero cargar como lo primero cuando se carga mi página. Actualmente tengo una etiqueta img con un src pero se carga de forma asincrónica, ¿cómo puedo asegurarme de que el navegador cargue mi imagen antes de mostrar más la página?
Una solución simple podría ser usar el atributo de precarga en <link> : Tipos de enlace: precarga . No es una concesión que el contenido estará listo, tal como lo leí, pero tal vez se ajuste a su caso.
Aquí hay un ejemplo:
<head> <link rel="preload" href="https://via.placeholder.com/450" as="image"/> </head> <body> <img src="https://via.placeholder.com/450" /> </body>yo he hecho algo parecido...
Tengo una 'pantalla de bienvenida' (puedes usar un div blanco simple para simular que no hay renderizado...) Haz una búsqueda en el img en js, luego elimina tu pantalla de bienvenida...
Obtenga el img en js cargue el img en el caché del navegador ... así que cuando su DOM muestre el img, ella ya está en el caché del navegador ...