1

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?

1
  • es simple se esta ejecutando al cargar la pagina y aun no ha hecho el preload, te recomiendo colocarlo en una funcion , luego de ejecutarse preload() llamas a la otra funcion el 5 may. 2017 a las 12:36

2 respuestas 2

0

Esto ocurre porque se esta realizando la llamada antes de que se hallan creado las etiquetas <img>, por lo tanto, en ese momento no existen.

Fíjate en ambos ejemplos, en uno el script está al inicio y en el otro al final de este.

Al inicio

<script>
  var images = [];
  var cant = 0;

  function preload() {
    cant = arguments.length;
      for (var i = 0; i < cant; i++) {
          images[i] = new Image();
          images[i].src = preload.arguments[i];
      }
  }

  preload(
  "https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/200px-HTML5_logo_and_wordmark.svg.png",
  "http://www.w3devcampus.com/wp-content/uploads/logoAndOther/logo_JavaScript.png",
  "https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png"
  )

  for (var i = 0; i < cant; i++) {
    document.getElementById("img"+i).src = images[i].src;
  }

</script>
<body>
	<img id="img0" src="">
	<img id="img1" src="">
	<img id="img2" src="">
</body>

Al final

<body>
	<img id="img0" src="">
	<img id="img1" src="">
	<img id="img2" src="">
  
  <script>
    var images = [];
    var cant = 0;

    function preload() {
      cant = arguments.length;
        for (var i = 0; i < cant; i++) {
            images[i] = new Image();
            images[i].src = preload.arguments[i];
        }
    }

    preload(
    "https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/200px-HTML5_logo_and_wordmark.svg.png",
    "http://www.w3devcampus.com/wp-content/uploads/logoAndOther/logo_JavaScript.png",
    "https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png"
    )

    for (var i = 0; i < cant; i++) {
      document.getElementById("img"+i).src = images[i].src;
    }
  </script>
</body>

Espero que te haya servido de ayuda. Éxito en tu proyecto!

0

en el javascript

  function preload() {
        for (var i = 0; i < arguments.length; i++) {
          var src = document.getElementById("load");
            var img = document.createElement("img");
            img.src = preload.arguments[i];
            img.id = "img" + i;
            src.appendChild(img);
        }
    }

    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"
    )

en el html

<div id="load">

</div>

asi debe funcionar es mas dinamico; creo que es lo que quieres el ejemplo en https://jsfiddle.net/20cthpsc/

6
  • Hola @JackNavaRow , me sigue saltando el error con el snippet que me has puesto. Me indica el mismo error que antes en las líneas 8,11,35 del ejemplo de arriba.
    – nice_guy
    el 5 may. 2017 a las 12:46
  • agrege el id en los datos de entrada el 5 may. 2017 a las 12:51
  • lo acabo de hacer, me sigue saltando el mismo error en la línea 36 (document.getElementById("img"+n).src = images[n].src;)
    – nice_guy
    el 5 may. 2017 a las 13:00
  • 1
    El problema yace por la carga del DOOM no por la función en si el 5 may. 2017 a las 13:15
  • 1
    tienes razon! no habia terminado la respuesta me di cuenta @JoséMiguelSepulveda el 5 may. 2017 a las 13:33

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.