更新

Question

我有一个标签框，根据哪个标签处于活动状态显示不同的信息。当用户点击选项卡时，如何在.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>

Answer 1

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

如何使用jQuery创建loading.gif？

1 个答案:

更新