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

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

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

假设你有一个带有图像标签的div。如果您有 ajax 请求，您可以像这样显示或隐藏div...（将此代码放在 .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
}