jQuery实现下拉加载功能实例代码_jquery

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<script>
var str = '';
if(page=="") page=1;
var stop=true;//触发开关,防止多次调用事件
$(window).scroll( function(event){
//当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载.
if ($(this).scrollTop() + $(window).height() + 10 >= $(document).height() && $(this).scrollTop() > 10) {
//if(stop==true){
//stop=false;
//var canshu="page/"+page+";
var url = "";
var parm = {'page':page};
page=page+1;//当前要加载的页码
//加载提示信息
$("#showlists").append("<li class='ajaxtips'><div style='font-size:2em'>Loding…..</div><>");
$.post(url,parm,function(data){
if( data.count == 0 ) {
$('.prolist-abtn').html('已全部加载完');
return;
}
$.each(eval(data), function(data, val) {
var url1 = "";
$(".ajaxtips").hide();
str = '<div class="content" id="showdiv">';
str +='<div class="cont clearfix">';
str +='<a href="url"><div class="cont_img fl">';
str +='<img src='+val.imgurl+' alt="" /></div>';
str += '<div class="cont_list fl"><p>'+val.sceneryname+'</p><ul class="cont_list fl">';
str += '<li class="cont_list2"><span>¥</span>';
str +='<strong>'+val.sellerprice+'</strong>起<i>¥'+val.sellerprice+'</i></li>';
str +='</ul></div></a></div></div>';
$("#showdiv").append(str);//把新的内容加载到内容的后面
});
stop=true;
},'JSON')
}
});
</script> 

以上代码是小编给大家分享的jQuery实现下拉加载功能实例代码,希望对大家有所帮助!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery下拉加载
iscroll 下拉加载实例、iscroll5下拉加载实例、jquery下拉加载更多、jquery 下拉加载、jquery实现下拉菜单,以便于您获取更多的相关知识。

时间: 2024-10-07 03:43:59

jQuery实现下拉加载功能实例代码_jquery的相关文章

Bootstrap中点击按钮后变灰并显示加载中实例代码_jquery

Bootstrap插件非常的好用了,我们今天一起来看一篇关于Bootstrap实现点击按钮之后按钮变成不可点击的一个效果了,具体的如下所示. 1.在按钮中加入data-loading-text,即点击按钮后显示的文字 <button type="submit" class="btn btn-primary btn-check" data-loading-text="提交中...">添加成员</button> 2.当点击按钮

检测jQuery.js是否已加载的判断代码_jquery

当然,该方法不局限于jQuery的检测,对与任何Javascript变量或函数都是通用的. 当前网页加载jQuery后,jQuery()或$()函数将会被定义,所以检测jQuery是否已经加载存在以下2种方法: 方法1: 复制代码 代码如下: if (jQuery) { // jQuery 已加载 } else { // jQuery 未加载 } 方法2: 复制代码 代码如下: if (typeof jQuery == 'undefined') { // jQuery 未加载 } else {

Jquery在指定DIV加载HTML示例代码_jquery

首先引入Jquery 复制代码 代码如下: <script src="js/jquery.js"></script> 在页面加入JS 复制代码 代码如下: <script> $(function(){ $("div#top_sidebar").load("top_sidebar.html"); }) </script> #top_sidebar 为指定DIV的ID

jQuery+AJAX实现无刷新下拉加载更多_jquery

随着互联网时代的发展,web前端已经和后台数据挂钩,作为web前端仅仅不是只切图写写html,css  和简单js交互. js  code $(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; var timer2 = null; $.ajax({ url: '/lightapp/marketing/verify/apply/list?page=1', t

RecycleView配合SwipeRefreshLayout实现轻量级上拉刷新下拉加载,外加牛X的Adapter

看过我这边文章的RecyclerView.Adapter的优化与封装的真的想说声抱歉,其实不需要继承BaseBean,只需要继承Object就可以了,而且更灵活了,当时不知道咋了,脑袋抽风了,多次了这一举. 好了,今天来一个更牛逼的神器RefreshLayout 效果图: 实现了上拉刷新和下拉加载功能 封装好的BaseAdapter和BaseViewHolder,将adapter交给Activity来管理 实现了单击事件和长单击事件 类结构图: 这个demo我把之前的BaseAdapter和Ba

jquery实现瀑布流效果 jquery下拉加载新数据_javascript技巧

瀑布流效果在很多网站还是有的,这种错落有致的排布看着还是很不错的呢.今天我就来记录一下关于用jquery实现瀑布流效果的代码: 一.页面基本排版 1. items盒子主要用来存放我们需要摆放的数据item: 2. tips是页面加载数据的时候用来提示用户的文本: <div class="wrapper"> <div class="items"> <div class="item"></div> &l

Ionic如何实现下拉刷新与上拉加载功能_javascript技巧

IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用.提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择.Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架.Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程

朋友圈 评论-类似朋友圈里的评论下拉加载点击图片放大

问题描述 类似朋友圈里的评论下拉加载点击图片放大 类似朋友圈里的评论 下拉加载 点击图片放大的功能实现思路或者有没有第三方提供的框架什么的,哪位大神指点下

ASP.NET仿新浪微博下拉加载更多数据瀑布流效果_实用技巧

闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前,先把实现的基本原理说一下.当夜幕下拉到底部的时候,js可以判断滚动条的位置,到达底部触发js方法,执行jquery的ajax方法,向后台一般处理程序夜幕ashx文件请求数据源,得到json格式的数据源.然后,遍历json数据源,拼接一个li标签,再填充到页面上去. 首先,我们来做个简单的html页面