title: setTimeout when preloading images
body: <p>I use the following codes to preload album images and show a loading bar.</p>
  
  <pre><code>var album1 = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];
  var album2 = ['01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg'];
  var total_images = album1.length + album2.length;
  var load_count = 0;
  
  $(document).ready(function() {
    function preloadImages(list, path) {
          var img;
          if (!preloadImages.cache) {
              preloadImages.cache = [];
          }
          for (var i = 0; i &lt; list.length; i++) {
              img = new Image();
              $(img).bind('load', function() {
                  load_count++;
                  $('#loading_bar #progress').css('width', Math.round(load_count * 100 / total_images) + '%');
                  if(load_count &gt;= total_images) {
                      init_sequence();
                  }
              });
              img.src = path + list[i];
              preloadImages.cache.push(img);
          }
      }
  
    preloadImages(album1, 'http://www.example.com/images/path1/');
    preloadImages(album2, 'http://www.example.com/images/path2/');
  }
  </code></pre>
  
  <p>The above preloading codes work fine in normal network condition. However when network is unstable, making one of the images unable to load, the function <code>init_sequence()</code> cannot be triggered.</p>
  
  <p>My question is, how can I set a timeout (probably using <code>setTimeout()</code> on above function) in preloading images (e.g. if the preload cannot finish in 30 seconds, load the <code>init_sequence()</code> anyways)?</p>
  
  <hr>
  
  <p><strong>Additional Information:</strong> </p>
  
  <p>In case somebody needs to know the HTML structure, here it is (allow me to show only the <code>&lt;body&gt;</code> part; I have included jQuery for sure):</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="loading_bar"&gt;
      &lt;div id="progress"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>#loading_bar {
      position: fixed;
      left: 0;
      bottom: 0;
      height: 5px;
      width: 100%;
      background-color: #EEE;
  }
  #loading_bar #progress {
      position: relative;
      left: 0;
      height: 5px;
      width: 0;
      background-color: #A68029;
  }
  </code></pre>