如何在.ready之前放置一个ajax加载器

Question

I need to archive this task.i have seen this type of tasks in various sites.

$(document).ready(function () {
    $.ajax // rest of codes goes here 
    $("").load // rest of codes goes here 
});

I need to show a gif before ready the document(DOM).After the ready the DOM it should disappear automatically.The gif should on the middle of the page.Any idea?

JAVASCRIPT

$(document).ready(function () {

    //calculater start
    $("#step2_6").click(function () {
        $("#calculater").load("cal/cal.html");
    });
    //calculater end

    //menu start
    $(".container").load("../../view/html/menu.html", function () {
        $(".main_menu.nav a").css("opacity", 0.3);
        $("#step1").css("opacity", 1);
        //new company start
        $("#step1_1").on("click", function () {
            //new company start setup opening....
            $(".load_window").load("../../view/html/Finalsetup.html", function () {
                //company file download
                $("#downloadLink").click(function () {
                    var companyname = $("#company_name").val();

                    $(this).attr("href", +"../../company_info/" + companyname + "/" + companyname + ".json");
                    $(this).attr("target", "_new");
                });

                //create the company through ajax...
                $("#CreateCompanyButton").click(function (event) {
                    event.preventDefault();
                    //adding step1 and step2 forms                    
                    var data = $("#companyData").serialize();
                    var dataTwo = $("#companyDataStepTwo").serialize();

                    $.ajax({
                        type: "POST",
                        url: "../../controller/business_contact_info.php",
                        data: data + "&" + dataTwo,
                        beforeSend: function () {
                            //loading a gif                        

                            $(".loader").html("<img src='../../img/loader.gif' />");
                        },
                        success: function (response) {
                            $(".main_menu.nav a").css("opacity", 1);

                            //remove gif after loaded                        
                            $(".loader").html(" ");

                            //add your infor window operning...

                            $(".load_window").load("../../view/html/addYourInfo.html", function () {
                                $("#addThePeople").click(function () {

                                    //hidden add people window is opening... 
                                    $("#addPeopleWindow").show();

                                    //select the excel sheet... 
                                    $("#excel").change(function () {

                                        //opening table window...
                                        $("#addPeopleWindow").load("../../view/html/tabledata.html", function () {});
                                    });
                                });
                            });
                        }
                    });
                });


                //adding scipt to selectors...
                $('.selectpicker').selectpicker();
                $(".drag").draggable();

                $("#previewButton").on("click", function () {

                    $("#previewSettingsView").show();
                });

                $("#previewClose").on("click", function () {
                    $("#previewSettingsView").hide();
                });

                $("#step_two").hide();
                $("#step_three").hide();
                $("#step_four").hide();

                $("#step_one_button").click(function () {
                    $("#step_one").hide();
                    $(".tell_us").css("opacity", "0.4");
                    $(".contact_info").css("opacity", "*0.2");

                    $("#step_two").show();
                });

                $("#step_two_back").click(function () {
                    $("#step_two").hide();

                    $("#step_one").show();
                });
            });
        });
    });
});

Answer 1

Just put the code into your script, without enclosing $(document).ready() . It will be executed as soon as the <script> tag is parsed by the browser.