javascript - 加载内容时的图像

Question

我根据选择框选项将一些内容从外部页面 div 加载到 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;
           }
   }); 
});

我看过一些教程，但认为我需要一些帮助。谢谢。

Answer 1

我通常创建一个显示和隐藏函数并使用 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;
}