1つのPHPページに2つのローダーがあります

私は2つの「ローダー」を埋め込みようとしています.1つはページが読み込まれ、もう1つはユーザーが読み込まれたページにフォームを送信するときです。1つのPHPページに2つのローダーがあります

スクリプトは、<head>の内部にある以下のようになります。

<script type="text/javascript"> 

// loader on form submit 

$(document).ready(function(){ 
    $('#myform').submit(function() { 
    $('#loaderImage').show(); 
    return true; 
    }); 
}); 

// the page load 'Loader' 

    $(window).load(function() { 
    $(".imageCarryingDiv").fadeOut();; 
    }); 
</script>

とこのようになります<body>内部<div>：

<div class="imageCarryingDiv"><img src="../images/loader.gif" style="height:30px; width:auto;" class="loaderImgx" alt=""><br>Loading...</div>

ページの負荷の問題である「ローダー」振る舞い予想通り、しかし、フォームが送信されたときに、ページのロード " Loader 'が再度表示されます。フォームが送信されたときにページが再び読み込まれた後に起こることが分かります。ローダーが表示される場所、ページが読み込まれる場所、フォームの送信時にのみ表示される場所では、ローダーが表示される場所を避けることをどのようにお勧めしますか？

出典

2016-12-12 Mohan Wijesena

私は実際には、これらの2つのコードセットが別の場所にある理由はわかりません。 '$（ '。imageCarryingDiv'）.fadeOut（）;'コードを '$（document）.ready（）'関数の最上部に追加することができます。 – Jhecht

フォームが送信されたときにページがリロードされないように、フォームのデフォルト動作がトリガーされないようにする必要があります。ここでは、preventDefault()でそれを行うだろう方法は次のとおりです。ここ

$(document).ready(function() { 
    $('#myform').submit(function(e) { 
    // Use prevent default to avoid page reload 
    e.preventDefault(); 
    $('#loaderImage').show(); 
    return true; 
    }); 
});

preventDefault()のマニュアル：http://www.w3schools.com/jsref/event_preventdefault.asp

出典

2016-12-12 02:53:58 paulgv

はい、私は答えたいと同じです。これはトリックを行う必要があります。 – alpham8

@paulgv 'preventDefault（）'がフォームを送信するのを止めるのは、それが正しいと思っていることです。私はこれを前提としていますが、フォームの検証は行われません（PHPフォームの検証）。そこに私のためのヒントがありますか？ –

@MohanWijesenaクラウスが提案したように、フォームのデータをAjaxで送信したいと思うかもしれません。私はあなたが 'e.preventDefault（）'を削除してフォームが送信されたときにクッキーを設定して、このクッキーが設定されているときにイメージを表示しないようにすることもできますが、Ajaxがおそらく最高でしょう。 – paulgv

ページを提出した後に再ロードされるように、ページのローダーが再び表示されます。

$('#myform').submit(function(e) { 
    $('#loaderImage').show(); 
    return true; 
    }); 

    data = $('#myform').serialize(); 

    $.ajax({ 
     url: url, 
     type: "post", 
     data: data, 
     dataType: "json", 
     success: function(response){ 
      $('#loaderImage').hide(); 
     } 
    }); 
    e.preventDefault(); 
});

この方法では、ページがリロードされず、ページのローダーは一度だけ表示されます：あなたは、次のようにフォームがAJAXリクエストに提出回すことによってそれを変更することができます。

出典

2016-12-12 03:00:20 Klaus

1つのPHPページに2つのローダーがあります

答えて

関連する問題