如何使用js在load（）进程中显示加载图像

I want to show loading image in my page.. I have a load() function and i need to display a loading image in the center of my page while its loading and i am using load() with backbone router.

I think i need javascript to do it but i dont know how to show it only at load() proccess.

**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");   

I am also php developer i did this using jquery.. You can use it through Jquery like this:- Just confirm your jquery script are present..

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

And you have to call this function

  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'
            });
    }

This function will show loader image when it will execute..

Or if you stick to load() do like this:-

<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");
}

Lets say you have a div with image tag in it.. If you have ajax request than You can show or hide the div like this... (place this code on .ready function)

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

And if you do not have ajax call than use like this....

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
}