0

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

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

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

4

3 回答 3

2

为了平衡，这在纯 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?_...');
于 2013-04-23T15:49:22.920 回答
1 
$('#chart').attr('src', 'chart.php').load(function(){
    //something
});
于 2013-04-23T15:35:13.193 回答
1

如果浏览器缓存了它，你可以在查询字符串中添加一些东西来打破它。无论哪种方式，您都需要侦听图像的load事件，该事件应在设置之前src绑定（以防它被缓存）：

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

参考：

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

  • 它不能始终如一地工作，也不能可靠地跨浏览器
  • 如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发
  • 它没有正确地冒泡 DOM 树
  • 可以停止对已经存在于浏览器缓存中的图像进行触发
于 2013-04-23T15:39:20.217 回答