Adding div dynamically, but images very slow to load

Question

I'm creating divs dynamically based on ajax callbacks. Each div contains a single png image:

var myDiv = "<div class='myClass' id='divid'>" + 
            "<img id='newDiagDivId' src='images/approved-icon.png'>" + 
            "<div style='display:inline-block;vertical-align:top;'>blah</div>" + 
            "</div>";

...here's how I add it:

$(myDiv).hide().appendTo( divContainer).fadeIn( 100);

The div displays correctly formatted, but the png image takes about 5-10s to show up. It's a tiny image, just 2kb, hosted locally from the app itself. The issue occurs on FF, Chrome, and IE, there's literally no difference in behavior.

The page handles about 2-3 ajax callbacks per second in "rapid fire" fashion, spitting out these divs for each callback, I don't have a slow machine, so I don't suspect the browser falling behind while loading the images.

Is there anything I can do to force the images to load faster or, immediately upon the div being added to the dom?

Answer 1

Ok, so I'm answering my own question yet again...

Decided to preload images in the DOM based on this, works in FF, Chrome, IE!

$(window).load(
      function() { 
          preload(['images/approved-icon.png','images/denied-icon.png'])});

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}