动态添加div，但是加载图像非常慢。

Question

我正在基于ajax回调动态创建div。每个div包含一个png映像：

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>";

.我是怎么加进去的

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

div显示格式正确，但png图像大约需要5-10秒才能显示出来。这是一个很小的图像，只有2kb，本地托管从应用程序本身。这个问题发生在FF、Chrome和IE上，实际上它们的行为并没有什么不同。

该页面以“快速触发”的方式每秒处理大约2-3个ajax回调，为每个回调释放这些div，我没有慢速的机器，所以我不怀疑浏览器在加载图像时落后。

我能做些什么来迫使图像加载得更快，或者在div被添加到dom后立即加载吗？

Answer 1

好吧，那么我再一次回答我自己的问题.

决定在DOM中预加载基于this的图像，工作于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');
    });
}