6

我正在基于 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 后立即加载？

4

1 回答 1

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');
    });
}
于 2013-08-22T16:52:31.103 回答