How to show the loader image until the page data loads?

2.2k views Asked by At

I'm a newbie to the concept of displaying loaded image until the data loads. The time to load the data is too much so till then I want to display the loader image. Can anyone help me in this regard? For your reference I'm putting below the code from the PHP file and Smarty template file(i.e. HTML). Following is my PHP code:

<?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")
?>

The Smarty template code is as follows:

<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>
4

There are 4 answers

0
Iqbal Malik On

You cannot show loading image if you are showing data using PHP directly. However if you load the data using ajax, then you can use ajax callbacks to show and hide the preloader.

0
Sergei Beregov On

Make a div with ID loading and add spinner icon or text there and add this to your JS file.

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

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

Try Add this div on top of your page

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

Put this script to your page

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

style

#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
}
0
gagge On

PHP is not gonna do it for you. jQuery/JS will. Something like this

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