的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?_...');