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

Question

我想在我的页面中显示加载图像。我有一个load()功能，我需要在加载时在页面中心显示加载图像，并且我正在将 load() 与骨干路由器一起使用。

我想我需要 javascript 来做到这一点，但我不知道如何仅在 load() 过程中显示它。

Answer 1

假设您有一个带有图像标签的 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
}

Answer 2

**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 3

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