Question

我想在我的页面中显示加载图片.. 我有一个load()函数，我需要在加载时在页面中心显示一个加载图像，我正在使用带有骨干路由器的load（）。

我想我需要javascript来做，但我不知道如何只在load（）过程中显示它。

Answer 1

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

Answer 2

假设你有一个带有图片标记的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 3

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

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

3 个答案: