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

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

根据this决定在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');
    });
}