Question

我通过单个查询提取了数千条记录，并且该页面需要永久加载。我正在尝试在后台加载时显示一个简单的“加载”指示符。

我的加载div是#loadDiv，我的信息表是#wrapper

我目前无法正常工作的是：

 <script>
$(function() {
  $('#loadDiv').hide();
  $('#wrapper').hide();
  $('#loadDiv').ajaxStart(function() {
    $(this).show();
  }).ajaxStop(function() {
    $('#loadDiv').hide();
  });
  $('#wrapper').fadeIn();
   });
</script>

我没有做任何AJAX调用，所以这基本上无法工作。我只是使用while语句加载查询。我想在#wrapper加载时显示我的加载div $ loadDiv，然后在页面加载完成后，隐藏#loadDiv，并淡入#wrapper。

这可能吗？

Answer 1

不幸的是，如果相同的PHP脚本正在进行也应该输出HTML的查询，则无法显示加载栏。

如果您想为查询显示加载栏，您的程序流程应类似于此类...

生成HTML页面并将其发送到客户端
AJAX调用从HTML页面调用到查询数据库的PHP脚本，在调用时显示动画加载图形，并在AJAX请求完成时删除它或显示加载完成消息（表示查询已完成，并且PHP页面返回了结果）
在PHP脚本中预先格式化数据并将HTML传回给您的AJAX调用，或者仅将数据作为JSON传递并通过javascript在客户端操作数据

Answer 2

这是有可能的，但是不可能好。您可以控制页面加载顺序的唯一方法（意思是“使用加载图形显示我的页面布局，并在加载由此SQL查询加载的其他数据之前加载图形”）是允许要加载的HTML页面，然后使用AJAX从SQL select中提取结果。

按照您要求的方式进行，最好的选择（相信我，这不是您最好的主意）可能会：

使用CSS隐藏#wrapper
使用CSS显示#loadDiv
尽可能早在页面加载序列中（可能只是在头部的脚本块中），设置一个javascript SetInterval'ed函数，用于检查#wrapper中显示已完成加载的内容（例如，您可以制作确保SQL结果的最后一个值具有特定的ID，并使用此SetInterval函数查看页面上是否存在该ID）。一旦SetInterval'ed函数找到该ID，您就会知道您的SQL结果已完成加载，您可以让该函数执行淡入操作，然后取消Interval。

这会因浏览器和缓存情况而有所不同（浏览器有不同的加载顺序，一些元素的缓存但其他元素的缓存也会影响显示你希望的方式。）所以，这不是一个好的选择，特别考虑到这种情况下一些简单的AJAX会有多好。

你的很多更好的选择是创建一个单独的页面，只显示你想要的SQL结果，然后在主页面加载完成后使用AJAX将其拉入#wrapper。要学习它并不困难：http://api.jquery.com/jQuery.get/

显示MySQL查询的加载栏

2 个答案: