Question

我根据选择框选项将一些内容加载到外部页面div的div中。我注意到有时加载一个包含大量信息的div需要一段时间，如果有一种方法可以制作一个图像加载器（gif），同时div会加载吗？

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

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

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

Answer 2

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语句也已被避免。这假设您的容器包含一个标识为spinner的元素，使用CSS正确设置样式并包含一个微调器gif。

Answer 3

您可以使用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;
           }
   }); 
});

试一下，看看是否有帮助。

加载内容时的图像

3 个答案: