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

问题描述：

这可能是一个重复，但我似乎无法找到正确的答案。我试图实现的是显示加载gif，当我按下加载更多。在页面加载更多项目时加载gif

这是我website.What的我想的结构，如果不知何故，我可以显示加载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完成加载后隐藏加载器的示例。

以下代码中的“已完成加载”在哪里，请将其替换为已解析的响应数据并将其附加到“DISPLAY ITEMS”内容中。

$('#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>

答

我之前完成的方式是创建一个带有循环加载程序gif的DIV，并将DIV设置为display:hidden，然后在AJAX加载期间将DIV更改回display: block（或任何您想要的类型）。在完成/成功/错误/其他任何情况下重新进行查看。

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

相关推荐