如何在jquery中使用加载图像？

code:

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

In this code I want to use loading image before data is fetch from all_courses_college.php how can we do this ?

Thank You

create a div with loading image and hide it and in script section elts it id be divLoad for example

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

Just try as -

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

You need to use beforeSend method

$(document).ready(function(){ $("#submit2").click(function(){

            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);
              }
            });
          });
        });