如何在加載頁面數據之前顯示加載器映像？

-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

如何在加載頁面數據之前顯示加載器映像？

回答

相關問題