如何在加载页面数据之前显示加载程序图像 - How to show the loader image until the page data loads?

我是显示加载的图像直到数据加载这一概念的新手。加载数据的时间太长了，所以在那之前我想显示加载程序的图像。有人能在这方面帮我吗？为了供您参考，我将PHP文件和Smarty模板文件（即HTML）中的代码放在下面。以下是我的PHP代码：

<?php 
  require_once("../../includes/application-header.php");
  $objQuestionMatch  = new QuestionMatch();
  $request = empty( $_GET ) ? $_POST : $_GET ;

  if($request['subject_id']!="") 
    $subject_id = $request['subject_id'];
  if($request['topic_id']!="") 
    $topic_id = $request['topic_id'];
  if($subject_id !='' && $topic_id !='')
    $all_match_questions = $objQuestionMatch->GetSimilarQuestionsBySubjectIdTopicId($subject_id, $topic_id);
  $smarty->assign('all_match_questions', $all_match_questions);
  $smarty->display("match-question.tpl")
?>

Smarty模板代码如下：

<form id="delete-questions-form" name="delete-questions-form" action="{$control_url}modules/questions/match_question.php" method="post">
<table width="100%" class="base-table tbl-practice" cellspacing="0" cellpadding="0" border="0">
  <tr class="evenRow">
    <th width="33%" style="text-align:center;" class="question-id">Que ID</th>
    <th width="33%" style="text-align:center;" class="question-id">Matching Que IDs</th>
    <th width="33%" style="text-align:center;" class="question-id">Percentage(%)</th>
  </tr>
{if $all_match_questions}
  {foreach from=$all_match_questions item=qstn key=key}   
    {if $qstn.similar_questions_ids_and_percentage}
      {assign var=counter value=1}
  <tr class="oddRow">
    <td class="question-id" align="center" valign="top">
      <a href="{$qstn.return_url}" title="View question" class="inline_view_question_detail">QUE{$qstn.question_id}</a>{if $qstn.question_appeared_count gt 0}-Appeared({$qstn.question_appeared_count}){/if}
    </td>
      {foreach from=$qstn.similar_questions_ids_and_percentage item=question key=q_no}
        {if $counter gt 1}
    <tr class="oddRow"><td class="question-id" align="center" valign="top"></td>
        {/if}
    <td class="question" align="center" valign="top">
        {if $question.question_id!=''}
      <a href="{$qstn.return_url}" title="View question" class="inline_view_question_detail">QUE{$question.question_id}</a>{if $question.question_appeared_count gt 0}-Appeared({$question.question_appeared_count}){/if}
        {if $question.question_appeared_count eq 0}
      <a id ="{$question.question_id}" href="#" class="c-icn c-remove delete_question"  title="Delete question"> Delete</a>{/if}
        {/if}
    </td>
    <td class="question" align="center" valign="top">
        {if $question.percentage!=''}{$question.percentage}{/if}
        {assign var=counter value=$counter+1}
    </td>
  </tr>
      {/foreach}               
    {/if}
  {/foreach}
{else}
  <tr>
    <td colspan="2" align="center"><b>No Questions Available</b></td>
  </tr>
{/if}
</table>
</form>

如果直接使用PHP显示数据，则无法显示加载图像。但是，如果使用ajax加载数据，则可以使用ajax回调来显示和隐藏预加载程序。

制作一个带有ID加载的div，并在其中添加微调器图标或文本，然后将其添加到JS文件中。

$( document ).ajaxStart(function() {
    $( "#loading" ).show();
});
$( document ).ajaxComplete(function( event,request, settings ) {
    $( "#loading" ).hide();
});

尝试在页面顶部添加此div

<div id="spinner_load" ></div>

将此脚本放到您的页面

$(window).load(function() { $("#spinner_load").fadeOut("slow"); });

样式

#spinner_load
{
position: fixed;left: 0px;
top: 0px;
width: 100%;height:
 100%;
z-index: 9999;
background:#000 url(images/483.GIF) no-repeat;
background-position:center
}

PHP不会为你做这件事。jQuery/JS会。像这样的

$(‘#image-selector’).load(function(){
    //Do stuff after image is loaded
});