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

【问题标题】：Loading gif while page loads more items在页面加载更多项目时加载 gif
【发布时间】：2016-11-24 20:56:37
【问题描述】：

这可能是重复的，但我似乎找不到正确的答案。我试图实现的是当我按下加载更多时显示加载 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);
}

但是，如果我这样做，我看不到想要的结果。

对此我会采取什么方法以及解决方案是什么？

【问题讨论】：

你的ajax调用在哪里得到结果？
在 loadmore 事件处理程序中不是很明显吗？
在 ajax 调用 $(".loader").show() 之前显示加载器，并在收到响应后隐藏加载器。 $(".loader").hide()
你的ajax工作正常吗？
是的，一切正常。

标签： javascript jquery css

【解决方案1】：

这里是如何在 ajax 完成加载后隐藏加载器的示例。

以下代码中的“加载完成”在哪里，将其替换为您解析的响应数据并将其附加到您的“显示项目”内容中。

$('#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");
    });

})

.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;
}

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

【讨论】：

【解决方案2】：

我之前的做法是创建一个带有循环加载器 gif 的 DIV，并将 DIV 设置为 display:hidden，然后在 AJAX 加载期间将 DIV 改回 display: block（或您想要的任何类型） .在完成/成功/错误/其他任何情况下重新隐藏它。

【讨论】：

请用小提琴之类的东西备份一下，我将不胜感激。