0

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

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

4

3 回答 3

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;
}
于 2012-12-20T08:33:08.887 回答
0

您可以为此使用 ajaxStart 函数和 .load 成功函数回调，

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

试试这个，看看是否有帮助。

于 2012-12-20T08:41:08.477 回答
0

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>

你的javascript可以是这样的：

$(document).ready(function() {
    var $containerDiv = $('#div_where_content_loads_in');
    var $spinner = $containerDiv.find('#spinner');
    $("#select_box").change(function() { // Called when user selects a value
        // Get the selected option
        // one of "foo", "bar", "foobar", "barfoo"
        var selectedOption = this.value;

        // Get the content URL
        // one of "page.html #foo", "page.html #bar",
        //        "page.html #foobar", "page.html #barfoo"
        var contentURL = "page.html #"+selectedOption;

        $spinner.show(); // Show the spinner before starting content load

        // Now that contentURL is the correct URL we want to load, call $.load
        $containerDiv.load( contentURL, function() {
            $spinner.hide(); // Hide the spinner when the content finished loading
        });
    });
});

请注意，该switch声明也被避免了。这假定您的容器包含一个带有 id 的元素spinner，使用 CSS 正确设置样式并包含一个微调器 gif。

于 2012-12-20T08:34:54.610 回答