在 JS 中使用 .load 时如何显示“加载”动画？

【问题标题】：How do I show a 'loading' animation while using .load in JS?在 JS 中使用 .load 时如何显示“加载”动画？
【发布时间】：2016-03-11 00:57:03
【问题描述】：

我正在提取一个需要一些详细信息的 WSGI URI，但是在加载 URI 详细信息时有几秒钟的等待时间。在收到 URI 响应之前加载动画“正在加载”图像的最佳方法是什么？

我使用的JS代码是：

<script type="text/javascript">
jQuery(function($){
$('#overview').load('<WSGI URI HERE>');
});
</script>

然后在 DIV 中调用：

<div id="overview"></div>

【问题讨论】：

【解决方案1】：

您可以显示加载指示器并在加载图像时隐藏该指示器。您必须添加一个包含指示器的 <div>-block 并将其放置在您的图像顶部。

$('#overview').load('<WSGI URI HERE>', function() {
  $('#spinner').fadeOut();
});

您可以在以下位置找到大量加载指标：http://preloaders.net/ru 您还可以在以下位置找到有趣的微调器：https://github.com/tobiasahlin/SpinKit 并在：https://github.com/lukehaas/css-loaders

【讨论】：