如何顯示加載圖像在加載（）與js的進程

Question

我想顯示加載圖像在我的頁面.. 我有一個load()函數，我需要顯示加載圖像在我的頁面的中心，而其加載和我正在使用負載（）與骨幹路由器。

我想我需要javascript來做到這一點，但我不知道如何僅在load（）進程中顯示它。

Answer 1

**You can use in this way** 
function showLoadingMsg() { 
    $('#loading-message').css({ 
     display : 'block' 

     }); 
    } 
function hideLoadingMsg() { 
    $('#loading-message').remove(); 
} 

**the place where you want to show loading gif** 
<!--loding image goes here--> 
    <div style="display:none" id="loading-message"><img src="<?php echo base_url(); ?>assests/img/loading.gif" /></div> 


**When to show and hide should be in** 

obj.fbId ="14232"; 
showLoadingMsg(); 
$.post("<?= base_url() ?>welcome/insertVideos",obj, 
                 function(success){ 
    hideLoadingMsg(); 
}, "json"); 

Answer 2

我也是PHP開發人員，我沒有這個使用jquery .. 你可以使用它通過jQuery的是這樣的： - 只需確認您的jQuery腳本存在..

<div id="popup1" class="popup_block"> 
    <?php echo $this->Html->image('loader2.gif'); ?> 
    <h4>Processing Please Wait...! </h4> 
</div> 

而且你要調用此功能

function open_loader(){ 
      if(enrollFlag==0){ 
       return false; 
      } 
      //Fade in Background 
      jQuery('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag. 
      jQuery('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
      var popID = 'popup1'; 
      //var popWidth = 500; 
      //Fade in the Popup and add close button 
      jQuery('#' + popID).css({ 'width': '250' }); 

      //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css 
      var popMargTop = (jQuery('#' + popID).height() + 80)/2; 
      var popMargLeft = (jQuery('#' + popID).width() + 80)/2; 

      //Apply Margin to Popup 
      jQuery('#' + popID).css({ 
       'margin-top' : -popMargTop, 
       'margin-left' : -popMargLeft, 
       'display' : 'block' 
      }); 
    } 

此功能會顯示何時將執行加載圖像..

或者，如果你堅持load() 這樣做： -

<input type="button" onclick="example_request()" value="Click Me!" /> 
<div id="example-placeholder"> 
    <p>Placeholding text</p> 
</div> 

function example_ajax_request() { 
    $('#example-placeholder').html('<p><img src="/images/loader.gif" width="220" height="19" /></p>'); 
    $('#example-placeholder').load("/examples/loaded.html"); 
} 

Answer 3

比方說你有在它的圖像標記一個div ..如果你有Ajax請求比你可以將此代碼上顯示或隱藏這樣的格...（地點.ready函數）

$('#loadingDiv') 
    .hide() // hide it initially 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    }); 

如果你沒有Ajax調用不是使用像這樣的....

function Load() 
{ 
    $('#loadingDiv').hide(); // hide it initially 
    $('#loadingDiv').show() ; 
    //-------------Your code here of form loading------ 
    //-------------Your code here of form loading------ 
    //------- 
    //------- 
    $('#loadingDiv').hide();// hide it in the last 
}