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?

Possibly a duplicate of [Javascript: Images loading too slowly](http://stackoverflow.com/questions/6524935/javascript-images-loading-too-slowly) — Itay, Aug 22 '13 at 15:56
@StefanDunn Just another simple `div` with class and id attributes only. — raffian, Aug 22 '13 at 16:23

score 1 · Accepted Answer · edited May 23 '17 at 12:17

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');
    });
}

Adding div dynamically, but images very slow to load

1 Answers1