这可能是一个重复,但我似乎无法找到正确的答案。我试图实现的是显示加载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()' –