javascript - 加载重型 png 图像时的 Gif 加载器

Question

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

$('#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?_...');