免插件，简单实现上拉加载loading
Posted coober
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了免插件，简单实现上拉加载loading相关的知识，希望对你有一定的参考价值。
上拉加载是前端经常遇到的问题，采用插件往往能够轻松解决，这里介绍一种免插件简单实现上拉加载的方法，参考一下，下面分享一下代码。
<body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class=‘ball-pulse‘>加载更多</div> </body>
加入了css3动画loading效果；
css
<style type="text/css"> /*loading效果*/ @-webkit-keyframes scale { 0% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; } 45% {-webkit-transform: scale(0.1);transform: scale(0.1);opacity: 0.7; } 80% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; } } @keyframes scale { 0% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; } 45% {-webkit-transform: scale(0.1);transform: scale(0.1);opacity: 0.7; } 80% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; } } .ball-pulse > div:nth-child(1) { -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); } .ball-pulse > div:nth-child(2) { -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); } .ball-pulse > div:nth-child(3) { -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); } .ball-pulse > div { background-color: #aaa; width: 7px; height: 7px; border-radius: 100%; margin: 2px; display: inline-block; } .ball-pulse{text-align: center;color:#aaa;background:#EDF4F4; font-size:16px;height:1.5rem;line-height: 1rem;} body,html,ul,li{padding:0;margin:0;} ul li{height:4.5rem;background:#ccc;border-bottom:2px solid #aaa; list-style: none;} </style>
js部分：
<script type="text/javascript" src="jquery-2.1.0.js"></script> <script type="text/javascript"> $(function(){ /****************** 滚动上拉下拉加载 ***************/ $(document).on("scroll",function() { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(window).height(); if ($(".ul li").length == 10) { $(".ball-pulse").html("已经到底了！") }else{ if (scrollTop + windowHeight == scrollHeight ) { //console.log("我到底部了"); setTimeout(getmore,600) function getmore(){ $(".ball-pulse").html("<div></div><div></div><div></div>") setTimeout(function(){ $(".ball-pulse").html("加载更多") $("ul").append("<li></li><li></li><li></li>")
},1000)
}
}
}
});
})
</script>
当然我们也可以在加载的时候做下js判断，如果数据加载完毕，loading显示“已经到底了！”，这就看我们自己的发挥了，这个demo更适用于移动端页面使用，希望能帮助大家。
以上是关于免插件，简单实现上拉加载loading的主要内容，如果未能解决你的问题，请参考以下文章