Estoy usando este script para cargar imágenes en dos de mis sitios (el script está alojado en otro sitio). El script se carga en el sitio web y coloca la imagen dentro de un div con el ID div-to-load-external-image
El problema es que PageSpeed Insights me dice que preload estas imágenes y no tengo ni idea de cómo hacerlo...
¿Alguna ayuda?
var imagesvar = [ ["/goout/mylink/", "https://picsum.photos/300/145", "Title 1", "tracking-image"], ["/goout/mylink/", "https://picsum.photos/300/145", "Title 2", "tracking-image"], ["/goout/mylink/", "https://picsum.photos/300/145", "Title 3", "tracking-image"], ["/goout/mylink/", "https://picsum.photos/300/145", "Title 4", "tracking-image"], ]; function shuffle(b) { var j, x, i; for (i = b.length - 1; i > 0; i--) { j = Math.floor(Math.random() * (i + 1)); x = b[i]; b[i] = b[j]; b[j] = x; } return b; } shuffle(imagesvar); document.getElementById('div-to-load-external-image').innerHTML = '<a href="'+imagesvar[0][0]+'" target="_blank" rel="nofollow"><span class="myclass">New</span><div class="myimage" style="text-align:center;"><img src="'+imagesvar[0][1]+'" width="300px" height="145px" alt="'+imagesvar[0][3]+'" onClick="gtag(\'event\', \'TodNav\', {\'event_category\': \'tod\',\'event_label\': \'tod-'+imagesvar[0][3]+'\'});" /></div><h2 class="title">'+imagesvar[0][2]+'</h2></a>';Creo que puede precargar imágenes en la sección <head> de su documento HTML usando lo siguiente:
<html> <head> <link rel="preload" as="image" href="someImage"> </head> <body> <img src="someImage"> </body> </html>Encontré un artículo interesante que tal vez quiera leer: https://web.dev/preload-responsive-images/