Question

这可能是一个重复，但我似乎无法找到正确的答案。我想要实现的是当我按下更多的负载时显示加载gif。

这是我网站的结构。我在想什么，如果我以某种方式可以在人们点击加载时显示加载gif，然后在项目加载时隐藏该gif。

<body>
<navbar>
</navbar>
<div id="filter">

</div>
<div id="limitpage">

</div>
<button id="loadmore">load more</button>
<footer>
</footer>
</body>

这将是页面的基本代码结构。

我尝试了什么：

<script>
$('#loadmore').on('click',function(){
//add loader class to limitpage

// when ajax completes 

//remove loader class from limitpage
})
</script>

的CSS：

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}

但是，如果我这样做，我就看不到预期的结果。

我的方法是什么，解决方案是什么？

Answer 1

以下是如何在ajax完成加载后隐藏加载程序的示例。

＆＃34;完成装载＆＃34;在下面的代码中，将其替换为您解析的响应数据并将其附加到您的＆＃34;显示项目＆＃34;内容。

＆＃13;

$('#loadmore').on('click',function(){
    $(".loader").show();
    $.get("https://upload.wikimedia.org/wikipedia/commons/9/92/Big_Sur_Coast_California.JPG", function(){
        $(".loader").hide();
      console.log("finished loading. Append data to content here");
    });

})

＆＃13;

.loader {
    position: fixed;
    left: 200px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
    display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<navbar>
</navbar>
<div id="filter">

</div>
<div class="loader">
    <img src="https://d13yacurqjgara.cloudfront.net/users/140957/screenshots/2533654/loading-animation.gif" height="150">
</div>
<div id="limitpage">

</div>
<button id="loadmore">load more</button>
<footer>
</footer>
</body>

＆＃13;

Answer 2

我以前做过的方法是用循环加载器gif创建一个DIV，然后将DIV设置为display:hidden，然后将DIV更改回display: block（或任何类型的你想要）在你的AJAX加载期间。在完成/成功/错误/其他任何事情上重新隐藏它。

在页面加载更多项目时加载gif

2 个答案: