加载重 png 图像时的 Gif 加载器答案

【问题标题】：Gif loader while loading heavy png image加载重 png 图像时的 Gif 加载器
【发布时间】：2013-04-23 15:33:14
【问题描述】：

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

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

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

【问题讨论】：

顺便说一句，您显示的代码是 jquery 语法而不是 javascript，但您的问题中没有 jquery 标记。那么你想要一个 javascript 还是 jquery 的答案？

标签： javascript jquery

【解决方案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?_...');

【讨论】：

很高兴看到有人使用纯 JavaScript，作为说明，您可能会更好地使用更现代的“addEventListener”来支持“onload”。
@Xotic750 为什么你想在这样的事情上使用 vanilla Javascript 是件好事？ onload 无论如何都没有在这个答案中正确实现..
不是每个人在编写代码时都可以或想要包含 jquery 或其他库。是的，他的“onload”用法有问题。
固定加载声明 - 匆忙输入。 onload 可以在 DOM 级别 1 的任何地方工作，addEventListener 不会（这里主要考虑旧版 IE），在这种情况下，除了感觉更现代之外，我能想到的更多的打字没有任何好处。
没错，支持的新方法的优点之一是速度快得多。 jsperf.com/addeventlistener-vs-onload

【解决方案2】：

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

【讨论】：

非常感谢！我是这样实现的：$('#ajax-loader').attr('src', 'ajax-loader.gif'); $('#chart').hide(); $('#chart').attr('src', linkUrl).load(function(){ $('#ajax-loader').hide(); $('#chart').show();});

【解决方案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 树
可以停止为已经存在于浏览器缓存中的图像触发

【讨论】：