在 JS 中使用 .load 时如何显示 'loading' 动画？

Question

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

我使用的JS代码是：

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

然后在DIV中调用：

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

Answer 1

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

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

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

How do I show a 'loading' animation while using .load in JS?