動態添加div，但圖片加載速度很慢

我基於ajax回調動態創建div。每個div包含一個png圖片：動態添加div，但圖片加載速度很慢

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-10s露面。這是一個很小的圖像，只有2kb，由應用程序本身託管。這個問題發生在FF，Chrome和IE上，在行爲上幾乎沒有區別。

頁每秒處理約2-3 AJAX回調在「速射」時尚，吐出這些div每個回調，我沒有一個緩慢的機器，所以我不懷疑的瀏覽器，而下跌的背後加載圖像。

有什麼我可以做的，以強制圖像加載更快，或立即在div被添加到DOM？

來源

2013-08-22 raffian

你在其他瀏覽器中檢查過它嗎？ – srijan

這是FF，Chrome和IE中的同樣交易。 – raffian

可能是[Javascript：圖像加載太慢]的副本（http://stackoverflow.com/questions/6524935/javascript-images-loading-too-slowly） – Itay

好了，我回答我的問題再次...

決定基於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'); 
    }); 
}

來源

2013-08-22 16:52:31 raffian

回答

相關問題