title: Fast Loading of many images on html
body: <p>I am coding a script in which the user selects a range of data, and then I fetch a bunch of images (over 150) from the server and then  I loop trough them to make something like a movie. What I want to know is the most efficient way to load prevent lag when moving trough the images.</p>
  
  <p>Currently I am fetching the images from the server using Ajax and store them in a array of Image objects on the JavaScript. In the HTML I have a div tag in which I wish to put the images. After I finished creating all the Image object (and setting their proper src) in the array, I do the following:</p>
  
  <pre><code>imgElem = document.createElement('img');
  document.getElementById('loopLocation').appendChild(imgElem);
  imgElem.src = images[0].src;
  </code></pre>
  
  <p>After this I just make that last call but changing the loop index. I do that every 400ms. The loop works, but sometimes it lags and it freezes on an image for longer that it is supposed to be. I want to know if I am able to improve this anymore from the client side or I just need a server that responds faster.</p>