title: Forcing images to fully load
body: <p>I am fairly new to web development, so please excuse my ignorance.  I'm working on a page that generates color swatches which are just small sections of high resolution images.  There are up to 70 of these swatches being generated at a single time.  My problem is that I can't get the images to fully show up on the first try, I have to call the function again to get the images to fully load.  If I set up a function that makes my swatches visible upon loading (I'm using JQuery's .load) it never triggers, I'm assuming because it never actually loads.  Is there some way to force a full load of pages with a lot of content?</p>
  
  <pre><code>function showswatches(section, xmlHttpObj){
      for(i=0;i&lt;xmlHttpObj.length;i++){
          if(xmlHttpObj[i].getElementsByTagName('section')[0].childNodes[0].nodeValue == section){
              $('#swatches').html();
              var colors = xmlHttpObj[i].getElementsByTagName('color');
              for(j=0;j&lt;colors.length;j++){
                  $('#swatches').append('&lt;div class="swatch"&gt;');
                  $('#swatches').append('&lt;img src='+colors[j].childNodes[0].nodeValue+'&gt;');
                  $('#swatches').append('&lt;/div&gt;');
              }
          }
      }
  }
  </code></pre>