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

动态添加div，但加载图像的速度很慢

1 个答案: