Question

我使用以下JS代码将服务器端PHP脚本（图表）生成的png图像加载到HTML IMG元素<img id="chart">：

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

PNG图像生成和下载大约需要1秒钟，所以我想在图像加载时显示gif加载程序。如何用JS实现这个功能？

Answer 1

为了平衡，这在简单的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?_...');

Answer 2

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

Answer 3

如果浏览器缓存它，您可以在查询字符串中添加一些内容来打破它。无论哪种方式，您都需要侦听图像的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/

请注意该参考底部附近的警告，指的是处理图像时的事件：

它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，则无法在WebKit中正确触发

它没有正确地冒泡DOM树

可以停止触发已存在于浏览器缓存中的图像

GIF装载机，同时加载重png图像

3 个答案: