CODEWITHSUNDEEP
javascripthtml
ebsp
ebsp

Reputation: 102

Javascript image loader

I have this script that preloads a stack of images on my index page so that when people move on to my product page, the images are already in their cache. The problem is, when I remove the two alerts in the code so that it does not notify the user, the script won't work.

What am I doing wrong?

<script type="text/javascript">
  var imageFiles = new Array<?=$output?>
  var imagesLoaded = new Number(0);
  document.addEventListener("DOMContentLoaded", init, false);
  function init()
  {
    var images = new Array();

    alert("lkasd oe kdfl ke k");

    for(i=0; i<imageFiles.length; i++)
    images[i] = loadImage(imageFiles[i]);
  }
  function loadImage(url)
  {
    var image = new Image();
    image.addEventListener("load", imageLoaded, false);
    image.src = url;
    return image;
  }
  function imageLoaded()
  {
    imagesLoaded++;

    if (imagesLoaded == imageFiles.length)
      alert("Billederne er blevet preloadet og ligger i cachen.");
  }

</script>

Upvotes: 3

Views: 5674

Answers (1)

Jason
Jason

Reputation: 11615

I am guessing you didn't comment out your if as well as the alert.

We've had holy wars at my work about leaving off the { } for this very reason. =D

<script type="text/javascript">
  var imageFiles = new Array<?=$output?>
  var imagesLoaded = new Number(0);
  document.addEventListener("DOMContentLoaded", init, false);
  function init()
  {
    var images = new Array();

    //alert("lkasd oe kdfl ke k");

    for(i=0; i<imageFiles.length; i++)
    images[i] = loadImage(imageFiles[i]);
  }
  function loadImage(url)
  {
    var image = new Image();
    image.addEventListener("load", imageLoaded, false);
    image.src = url;
    return image;
  }
  function imageLoaded()
  {
    imagesLoaded++;

    //if (imagesLoaded == imageFiles.length)
    //  alert("Billederne er blevet preloadet og ligger i cachen.");
  }

</script>

Upvotes: 9

Related Questions