Question

我是显示加载图像的概念的新手，直到数据加载。加载数据的时间太长，所以我想显示加载器图像。谁可以在这方面帮助我？作为参考，我把它放在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>

Answer 1

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

Answer 2

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

$( document ).ajaxStart(function() {
    $( "#loading" ).show();
});

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

Answer 3

尝试在页面顶部添加此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
}

Answer 4

PHP不会为你做的。 jQuery / JS会。像这样的东西

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

如何在页面数据加载之前显示加载程序图像？

4 个答案: