的Gif裝載機同時加載重PNG圖像

Question

予裝載由服務器端PHP腳本（圖表）所產生的PNG圖像使用以下JS代碼的HTML IMG-元件<img id="chart">：

$('#chart').attr('src', 'chart.php');

的PNG圖像生成和下載大約需要1秒鐘，所以我想在圖像加載時顯示gif加載器。如何用JS實現這個功能？

Answer 1

$('#chart').attr('src', 'chart.php').load(function(){ 
    //something 
}); 

Answer 2

如果瀏覽器緩存它，你可以添加一些東西到查詢字符串來打破它。無論哪種方式，你要聽的圖像的load事件，這應該之前設置的約束其src（如果它的緩存）：

var target_url = 'chart.php?_=' + (new Date()).getTime(); 
// Show "loading" 
$('#chart').on("load", function() { 
    // Hide "loading" 
}).attr('src', target_url); 

參考：

• http://api.jquery.com/load-event/

請注意該參考底部附近的提示，指的是使用圖像時的事件：

• 這並不一致，也不可靠地工作，跨瀏覽器的
• 它不正確的WebKit如果圖像的src設置爲相同的SRC像以前
• 它不能正常泡了火DOM樹
• 可以停止火已經生活在瀏覽器的緩存

Answer 3

對於平衡圖像，這是非常簡單的純JS做：

var preload = function(element, src) { 

    var img = new Image(); 

    // Apply onload before applying src attribute to avoid IE prematurely firing 
    img.onload = function() { 
     // Replace #chart with image 
     element.parentNode.replaceChild(img, element); 
    }; 

    img.src = src; 
} 

preload(document.getElementById('chart'), 'chart.php?_...');