jqueryで画像を読み込む方法

Question

コード：私たちはこれを行うことができますどのようにデータがall_courses_college.phpからフェッチされる前に、ロード・イメージを使用したい、このコードでは

<script> 
      $(document).ready(function(){ 
       $("#submit2").click(function(){ 
       $("#success").css("display","block"); 
       $('html, body').animate({ 
         scrollTop: $("#popular_colleges").offset().top 
        }, 1000); 
       course = $("#courses").val(); 
       $.ajax({ 
        type:"POST", 
        data:{"courses":course}, 
        url:"all_courses_college.php", 
        success:function(data){ 
        $("#popular_colleges").html(data); 
        } 
       }); 
       }); 
      }); 
      </script> 

？

は

Answer 1

のロードイメージを持つdiv要素を作成し、それを隠すありがとう、スクリプトのセクションでは、IDの例

<script> 
       $(document).ready(function(){ 
        $("#submit2").click(function(){ 
        $('#divLoad').show(); 
        course = $("#courses").val(); 
        $.ajax({ 
         type:"POST", 
         data:{"courses":course}, 
         url:"all_courses_college.php", 
         success:function(data){ 
         $("#popular_colleges").html(data); 
         $('#divLoad').hide(); 
         } 
        }); 
        }); 
       }); 
       </script> 

Answer 2

ためdivLoadこと eltsは、同じようにしてみてください -

<img src="image_path" id='manage_img' style='display:none;'> 
<script> 
      $(document).ready(function(){ 
       $("#submit2").click(function(){ 
       $("#success").css("display","block"); 
       $('html, body').animate({ 
         scrollTop: $("#popular_colleges").offset().top 
        }, 1000); 
       course = $("#courses").val(); 
       $.ajax({ 
        type:"POST", 
        data:{"courses":course}, 
        url:"all_courses_college.php", 
        success:function(data){ 
        $("#popular_colleges").html(data); 
        }, 
        beforeSend:function() 
        { 
         $('#manage_img').show(); 
        } 
        complete:function(){ 
        $('#manage_img').hide(); 
        } 
       }); 
       }); 
      }); 
      </script> 

Answer 3

あなたをbeforeSendメソッドを使用する必要があります。

$（document）.ready（function（）{ $（ "＃のsubmit2"）。クリックしてください（関数（）{

  course = $("#courses").val(); 

      $.ajax({ 
       type:"POST", 
       data:{"courses":course}, 
     beforeSend: function(){ 
      $("#success").css("display","block"); 
      $('html, body').animate({ 
        scrollTop: $("#popular_colleges").offset().top 
      }, 1000); 
     },  
       url:"all_courses_college.php", 
       success:function(data){ 
       $("#popular_colleges").html(data); 
       } 
      }); 
      }); 
     });