动态添加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 中预加载图像，适用于 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');
    });
}