PHP: 如何使用jQuery显示加载图标？

Question

我有一个 Yii2 项目，在我的项目中，我在 php 文件中编写了脚本，用于发送数据和显示 loading 图标 ( .gif).

脚本 jQuery:

<script>
function displayResult() {
    var x = document.getElementById('bootstrap-duallistbox-selected-list_CustomizeHeader[list_header][]');
    document.getElementById("show").style.visibility = "visible";
    if (x.length == 24) {
        var txt = "";
        var val = "";
        for (var i = 0; i < x.length; i++) {
            txt += x[i].text + ",";
            val += x[i].value + ",";
        }
        window.location = 'result?txt=' + btoa(txt) + '&val=' + btoa(val);
    } else {
        alert("At least 24 Headers!");
    }
}
</script>

样式CSS：

<style>
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }

#show{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../../web/img/ajax-loader6.gif) center no-repeat #fff;
}
</style>

Php代码：

<p>
    <button type="button" onclick="displayResult()" class="btn btn-success">Process the headers</button>
</p>
    <div id='show'></div>

你可以看到我的CSS，我调用了一个.gif文件。上面的所有代码和脚本都成功显示了图标，但图标显示为 .jpg 文件。它不显示移动图形 (.gif).

有人知道如何在脚本中显示图标 .gif（移动图形）吗？

谢谢

已编辑：

我尝试过使用$("#loading").show();或$("#loading").fadeIn();，但没有任何效果，这种方法没有显示图标。

但是如果我使用 document.getElementById("loading").style.visibility = "visible";，它会显示一个图标，但是图标没有显示为 .gif 文件，而是显示为 .jpg 文件（非移动图形）.

Answer 1

这正是我在实际项目中的做法

//Example function called get accounts
    getAccounts: function () {
     //You can start loading here if the loading icon isnt already displayed by default
            $('.loading').show();

    //Do some function here
    this.$http.get('getRequestRoute', function (data) {
        this.accounts = data;

        //When the function is complete you can hide the loading icon
        $('.loading').hide();

    })

},

这里的基础是在任何你想显示的地方显示加载图标，默认情况下或在你想要它显示时显示它，然后当一组操作完成后你再隐藏加载图标.

在上面的示例中，我的加载图标的 class 为 loading，因此可以使用 jQuery $('.loading').

轻松访问它

我使用 jquery 的 hide 和 show 方法，它们完全按照您的想法执行，在网页上隐藏和显示元素。这基本上就是您显示和隐藏加载图标的方式。

Answer 2

您可以使用

显示元素

$('#show').show();

和隐藏同用

$('#show').hide();

确保您在 gif 文件中使用了正确的格式（仅将 jpeg 格式更改为 gif 是行不通的）。您可以尝试使用 google 中的示例 gif 文件来检查或在此处创建 gif http://www.ajaxload.info/

PHP: 如何使用jQuery显示加载图标？

PHP: How to display loading icon using jQuery?

javascript

css

icons

loading

脚本 jQuery:

样式CSS：

Php代码：

已编辑：