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

【问题标题】：Adding div dynamically, but images very slow to load动态添加 div，但图像加载速度很慢
【发布时间】：2013-08-25 11:08:02
【问题描述】：

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

【问题讨论】：

你在其他浏览器中检查过吗？
在 FF、Chrome 和 IE 中的处理方式相同。
可能是Javascript: Images loading too slowly的副本
变量divContainer设置成什么？
@StefanDunn 只是另一个简单的div，只有 class 和 id 属性。

标签： javascript jquery html css dom

【解决方案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');
    });
}

【讨论】：