Javascript 加载内容时的图像

我根据选择框选项从外部页面divs将一些内容加载到div中。我注意到有时候加载一个包含大量信息的div需要一段时间，我想知道是否有办法在加载div的同时制作一个图像加载器（gif）

下面是我用来加载内容的代码：

$(document).ready(function(){ 
$("#select_box").change(function(){ 
    var selectedOption = $('#select_box :selected').val(); 
    $containerDiv = $('#div_where_content_loads_in'); 
            switch (selectedOption)
            {
                case "Option1":$containerDiv.load( "page.html#div1" ); break;
                case "Option2":$containerDiv.load( "page.html#div2" ); break;
                case "Option3":$containerDiv.load( "page.html#div3" ); break;
                case "Option4":$containerDiv.load( "page.html#div4" ); break;
           }
   }); 
});

---

我看过一些turtorials，但我想我需要一些帮助。谢谢。

我通常创建一个显示和隐藏函数，并使用ajax.load函数调用它们。但昨晚我意识到我可以只听ajaxStart和Stop事件。对你来说，这可能是正常的生活方式，但我从未想过。无论如何，下面是使用jQuery侦听开始/停止事件和显示/隐藏加载动画的代码

$(document).ready(function () {
    $(document).ajaxStart(function () { showProgress() }).ajaxStop(function () { hideProgress() });
});

function showProgress() {
    $('body').append('<div id="progress"><img src="/images/loading.gif" alt="" width="16" height="11" /> Loading...</div>');
    $('#progress').center();
}

function hideProgress() {
    $('#progress').remove();
}

jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
    return this;
}

$（文档）.ready（函数（）{
$（document）.ajaxStart（函数（）{showProgress（）}）.ajaxStop（函数（）{hideProgress（）}）；
});
函数showProgress（）{
$（'body'）.append（'Loading…'）；
$（“#进度”）.center（）；
}
函数hideProgress（）{
$（“#进度”）.remove（）；
}
jQuery.fn.center=函数（）{
css（“位置”、“绝对”）；
this.css（“top”，（$（window.height（）-this.height（））/2+$（window.scrollTop（）+“px”）；
this.css（“left”、（$（window.width（）-this.width（））/2+$（window.scrollLeft（）+“px”）；
归还这个；
}

jQuery.load（）

接受第二个参数，即回调函数，该函数在内容完成加载后执行。其思想是，在调用

$containerDiv.load（）

之前显示一个微调器，并将其隐藏在回调中

说你的html是

<select id="select_box">
    <option value="foo">Load content from 'page.html #foo'</option>
    <option value="bar">Load content from 'page.html #bar'</option>
    <option value="foobar">Load content from 'page.html #foobar'</option>
    <option value="barfoo">Load content from 'page.html #barfoo'</option>
</select>

---

请注意，

switch

语句也被避免。这假设您的容器包含一个id为

微调器的元素，该元素使用CSS正确设置样式，并包含微调器gif。
您可以使用ajaxStart函数和.load success函数回调

$(document).ready(function(){ 
   $("#select_box").change(function(){ 

     $(document).ajaxStart(function(){
       $('.loader').show();
     });

    var selectedOption = $('#select_box :selected').val(); 
    $containerDiv = $('#div_where_content_loads_in'); 
            switch (selectedOption)
            {
                case "Option1":
                    $containerDiv.load( "page.html#div1", function(){
                       $('.loader').fadeOut('fast');
                    }); 
                    break;
                case "Option2":
                    $containerDiv.load( "page.html#div2", function(){
                       $('.loader').fadeOut('fast');
                    });  
                    break;
                case "Option3":
                    $containerDiv.load( "page.html#div3", function(){
                       $('.loader').fadeOut('fast');
                    });  
                    break;
                case "Option4":
                    $containerDiv.load( "page.html#div4", function(){
                       $('.loader').fadeOut('fast');
                    });  
                    break;
           }
   }); 
});

试试这个，看看是否有帮助。
如果我得到了这个，那么这个应该写在已经存在的代码上面，而不是代码中的任何现有标记中？这可以替换您在问题中提供的代码。唯一的要求是您还可以修改HTML，使其在加载内容的容器中包含一个“微调器”元素。这就是你要问的吗？好的！但是代码中的链接放在哪里呢？（java初学者）代码示例可以放在HTML中的
标记中，或者，也可以放在单独的
main.js
文件中，像
一样加载。在任何一种情况下，
标记都应该放在HTML文档的
中。还是不确定我是否在回答你的问题。对不起，我应该解释得更好。我是指选择菜单中的链接（case“Option1”：$containerDiv.load（“page.html#div1”）；break；等等），如果我只是用您的代码替换代码，链接在哪里？我尝试了，但没有成功。我制作了一个带有背景图片的类加载器，我想这是正确的吗？
$(document).ready(function(){ 
   $("#select_box").change(function(){ 

     $(document).ajaxStart(function(){
       $('.loader').show();
     });

    var selectedOption = $('#select_box :selected').val(); 
    $containerDiv = $('#div_where_content_loads_in'); 
            switch (selectedOption)
            {
                case "Option1":
                    $containerDiv.load( "page.html#div1", function(){
                       $('.loader').fadeOut('fast');
                    }); 
                    break;
                case "Option2":
                    $containerDiv.load( "page.html#div2", function(){
                       $('.loader').fadeOut('fast');
                    });  
                    break;
                case "Option3":
                    $containerDiv.load( "page.html#div3", function(){
                       $('.loader').fadeOut('fast');
                    });  
                    break;
                case "Option4":
                    $containerDiv.load( "page.html#div4", function(){
                       $('.loader').fadeOut('fast');
                    });  
                    break;
           }
   }); 
});