How to show loading image at load() proccess with js - php

Question

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.

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

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

Answer 3

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
}