Al precargar una imagen con Javascript, ¿hay alguna diferencia entre usar new Image() y document.createElement(link) with re="preload" ?
Por ejemplo, ¿hay alguna diferencia entre:
const loadImage = (src) => new Promise(r => { const image = new Image() image.onload = r image.onerror = r image.src = src })y
const loadImage = (src) => new Promise((resolve, reject) => { const link = document.createElement("link") link.rel = "preload" link.as = "image" link.href = src link.onload = () => { document.head.removeChild(link) resolve(undefined) } link.onerror = reject document.head.appendChild(link) })No pude notar nada durante la prueba. Mi caso de uso es que quiero cargar una imagen antes de actualizar la página para evitar un flash mientras se carga la imagen.
No hay mucha diferencia, pero ambos solo le avisarán cuando finalice la solicitud de red. Esa es sólo una parte del trabajo de la Imagen. Notará esto principalmente con imágenes grandes, pero la decodificación de los datos de la imagen también puede llevar una cantidad de tiempo considerable y provocar algunos destellos desagradables en algunos navegadores.
Para que quede claro, en el evento de carga ya tiene el ancho y el alto de la imagen, por lo que después de eso no tendrá un cambio de tamaño extraño de los cuadros en las páginas, pero aún así en algunos navegadores puede tener un cuadro vacío durante bastante tiempo. algún tiempo, o incluso algunas fallas extrañas mientras se decodifica la imagen, o simplemente bloquea toda la página mientras se realiza la decodificación.
Para evitar eso, puede usar el HTMLImageElement#decode() que devolverá una resolución Promise cuando se complete esta decodificación.
Al ejecutar los siguientes fragmentos en Firefox, debería ver el cuadro rojo antes de que la imagen se muestre realmente en el caso de "carga", mientras que en el caso de "decodificación" se muestra directamente. En Chrome, debería ver que el intervalo JS se bloquea durante casi un segundo con "onload", mientras que se trata de unos pocos ms con "decode ()":
onload // a big image const url = "https://upload.wikimedia.org/wikipedia/commons/c/cf/Black_hole_-_Messier_87.jpg?"; const img = new Image(); img.src = url + Math.random(); let i = 0; // keep something happening on the screen const elem = document.querySelector("pre"); const timer = setInterval(() => elem.textContent = i++, 4); img.onload = (evt) => { document.body.append(img); // stop the loop after some time setTimeout(() => clearTimeout(timer), 10000); }; img { background: red; height: 150px } <pre></pre>decode() // a big image const url = "https://upload.wikimedia.org/wikipedia/commons/c/cf/Black_hole_-_Messier_87.jpg?"; const img = new Image(); img.src = url + Math.random(); let i = 0; // keep something happening on the screen const elem = document.querySelector("pre"); const timer = setInterval(() => elem.textContent = i++, 4); img.decode().then((evt) => { document.body.append(img); // stop the loop after some time setTimeout(() => clearTimeout(timer), 10000); }); img { background: red; height: 150px } <pre></pre>