load()에서로드하는 이미지를 표시하는 방법

Question

내 페이지에서 이미지로드를 표시하고 싶습니다. 저는 load() 함수를 가지고 있는데,로드 중 이미지를로드 할 때 페이지 중앙에 이미지를 표시해야합니다. 백본 라우터와 함께 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' 
      }); 
    } 

가 실행됩니다 로더 이미지를 표시합니다이 기능 ..

또는 당신은에 충실 경우 은 다음과 같이 수행 -

<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

당신이 그것을에서 이미지 태그 사업부를 말할 수 있습니다 .. 당신이 아약스 요청을 할 수 있으면이 같은 사업부 (장소를이 코드를 숨기거나 표시 할 수있는 것보다 .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 
}