如何在加载页面数据之前显示加载器映像？

-1

我是显示加载图像的概念的新手，直到数据加载。加载数据的时间太多了，直到那时我才想显示加载程序映像。任何人都可以在这方面帮助我吗？为了供你参考，我将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>

来源

2013-12-11 PHPLover

自己没有用过smarty，但使用AJAX是要走的路。 –

您不能显示加载图片，如果你直接使用PHP显示数据。但是，如果使用ajax加载数据，则可以使用ajax回调来显示和隐藏预加载器。

来源

2013-12-11 10:40:31

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

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

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

来源

2013-12-11 10:41:24

尝试添加这个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 
}

来源

2013-12-11 10:42:48

我不认为它会工作。数据在页面加载时显示。除非数据很大。我的意思是，真的很大。 –

但它在我的项目上。我的项目包含23个脚本16种风格和许多图像 – 2013-12-11 10:45:43

PHP是不会那么做它适合你。 jQuery/JS会。类似这样的东西

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

来源

2013-12-11 10:46:43 gagge

如何在加载页面数据之前显示加载器映像？

回答

相关问题