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

私は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 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");