如何使用jQuery显示loading.gif

How to make a loading.gif appear using jQuery?

本文关键字：loading gif 显示 jQuery 何使用      更新时间：2023-09-26

我有一个选项卡框，根据活动的选项卡显示不同的信息。当用户单击选项卡时，如何在.print-area的前台显示加载gif，并使背景变暗，直到加载完所有内容？我还有一个过滤器选项，这样用户就可以过滤.print-area中的内容，所以无论我们如何做到这一点，都不能只是加载这个区域。。。它必须在该地区需要改变的任何时候发挥作用。下面的代码是我的代码，为了保护隐私，稍作修改。

我使用ajax/jquery加载.print-area中的任何信息并更改任何信息。

Html

<div id="tabbed-box" class="tabbed-box">
<ul id="tabs" class="tabs">
    <li><a href="#">Access Log</a></li>
    <li><a href="#">Conduit Log</a></li>
    <li id="space"><a href="">&nbsp;</a></li>
</ul>
<!--Main box area under tabs-->
<div id="content" class="content">
    <table height="auto" width="auto">
        <td align="left" valign="top" width="35%">
            Keyword:&nbsp;<input type="text" id="highlight_box" class="text_box" value="--Text--" /> &nbsp;
            <input type="button" id="highlight" value="Highlight" /> //when clicked the loading gif appears and highlight action begins
        </td>
        <td align="right" valign="top">
            <img id="play_pause_toggle" src="images/Pause.png" /> //there is a tail feature and this would toggle it with jQuery
        </td>
    </table>
    <!--Print area for the Access log-->
    <div id="access_content" class="tabbed-content">
        <div id="access_log_print" class="print-area">
                //When this tab is clicked a jQuery function will be called that will load the log into this section
        </div>
    </div>
    <!--Print area for the Error log-->
    <div id="error_content" class="tabbed-content">
        <div id="error_log_print" class="print-area">
        //When this tab is clicked a jQuery function will be called that will load the log into this section
        </div>
    </div>                           
</div>


showLoadingMsg();
$.ajax({
    url  : '<url>',
    success : function (serverResponse) {
        hideLoadingMsg();
    }
});
function showLoadingMsg() {
    $('body').append($('div').css({
        position   : 'absolute',
        width      : '100%',
        height     : '100%',
        zIndex     : 1000,
        background : '#000',
        opacity    : 0.5
    }).attr('id', 'loading-message'));
}
function hideLoadingMsg() {
    $('#loading-message').remove();
}

当调用showLoadingMsg()函数时，这将在您的网站上显示一个不透明的覆盖层，当调用hideLoadingMsg()函数时，该覆盖层将从DOM中删除。

为了在发出AJAX请求时显示此覆盖，我们在AJAX调用之前调用showLoadingMsg()，在AJAX呼叫的回调函数中调用hideLoadingMsg()。

如果你使用.load()，那么你的代码看起来更像这样：

showLoadingMsg();
$('.print-area').load('<url>', function () {
    hideLoadingMsg();
});

更新

function showLoadingMsg() {
    $('#access_log_print').css('opacity', 0.5).append('<img />').attr('src', '/path/to/loading-spinner.gif').css({
        position   : 'absolute',
        width      : 100,
        height     : 20,
        marginTop  : -10,
        marginLeft : -50,
        left       : '50%',
        top        : '50%',
        zIndex     : 1000
    }).addClass('loading-spinner');
}
function hideLoadingMsg() {
    $('#access_log_print').css('opacity', 1).children('.loading-spinner').remove();
}
相关文章：