动态添加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);

显示格式正确，但png图像需要大约5-10秒才能显示出来。这是一个微小的图像，只有2kb，从应用程序本身本地托管。该问题在FF、Chrome和IE上均发生，行为没有任何区别。

该页面每秒处理2-3个ajax回调，以“快速火力”方式生成每个回调的这些div，我没有一个慢机器，所以我不认为浏览器在加载图像时会落后。

有什么办法可以强制图像更快地加载或者在div添加到dom后立即加载吗？

- raffian

---

你在其他浏览器中检查过吗？ - srijan

在 Firefox、Chrome 和 IE 中都是同样的情况。 - raffian

可能是Javascript：图片加载太慢的重复问题。 - Itay

变量 divContainer 设置为什么？ - Stefan Dunn

@StefanDunn 只是另一个简单的 div，只有类和id属性。 - raffian

Answer 1

好的，我又要回答自己的问题了...

决定根据this在DOM中预加载图像，在Firefox、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');
    });
}

- raffian