Estoy intentando precargar una lista de imágenes a la caché para que luego no tarden en aparecerle al usuario. Llamo en mi archivo HTML el archivo javascript al final del <body>
como suelo hacer habitualmente. Dentro del archivo javascript tengo al principio de todo el siguiente snippet:
var images = [];
function preload() {
for (var i = 0; i < arguments.length; i++) {
images[i] = new Image();
images[i].src = preload.arguments[i];
}
}
preload(
"recursos/tier_icons/bronze_v.png",
"recursos/tier_icons/bronze_iv.png",
"recursos/tier_icons/bronze_iii.png",
"recursos/tier_icons/bronze_ii.png",
"recursos/tier_icons/bronze_i.png",
"recursos/tier_icons/silver_v.png",
"recursos/tier_icons/silver_iv.png",
"recursos/tier_icons/silver_iii.png",
"recursos/tier_icons/silver_ii.png",
"recursos/tier_icons/silver_i.png",
"recursos/tier_icons/gold_v.png",
"recursos/tier_icons/gold_iv.png",
"recursos/tier_icons/gold_iii.png",
"recursos/tier_icons/gold_ii.png",
"recursos/tier_icons/gold_i.png",
"recursos/tier_icons/platinum_v.png",
"recursos/tier_icons/platinum_iv.png",
"recursos/tier_icons/platinum_iii.png",
"recursos/tier_icons/platinum_ii.png",
"recursos/tier_icons/platinum_i.png",
"recursos/tier_icons/diamond_v.png"
)
for(n in images) {
document.getElementById("img"+n).src = images[n].src;
}
En la consola me salta el siguiente error al probarlo todo en la página:
Uncaught TypeError: Cannot set property 'src' of null
referenciando a esta línea:
document.getElementById("img"+n).src = images[n].src;
¿Cómo puedo resolver este error?