JQuery代码实现上拉加载(不使用插件)
<script type="text/javascript">
$(window).scroll(function() {
//已经滚动到上面的页面高度
var sl_top = $(this).scrollTop();
//页面高度
var dm_Height = $(document).height();
//浏览器窗口高度
var wd_Height = $(this).height();
//此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
if ($('#J_loadingData').css('display') == "none") {
if (dm_Height == parseInt(sl_top + wd_Height)) {
$('#J_loadingData').show();
setTimeout(function() {
ajaxData();
}, 3000)
}
}
});
//请求数据
function ajaxData() {
$.get('data/index.json', function(resp) {
if (resp.code == 1) {
$('#J_loadingData').hide();
var liHTML = '';
$.each(resp.data.commodityList, function() {
liHTML += '< a href=" ">' +
'<li>' +
'<div class="left-picture">' +
'< img src="' + this.commodityImg + '" />' +
'</div>' +
'<div class="right-info">' +
'<span class="commodity-title">' + this.commodityInfo + '</span>' +
'</div>' +
'</li>' +
'</ a>';
})
$('.commodity-list').append(liHTML);
}
})
}
</script>
JQuery代码实现上拉加载(不使用插件)的更多相关文章
- jquery 和 mui 上拉加载
jquery: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- 用jquery写一个上拉加载
/*可加载页面吗*/function canLoadMore() { return $('.loadin').length < 1;}/*移除正在加载字样*/function removeMor ...
- 【前端】上拉加载更多dropload.min.js的使用
代码如下:入职代码修改接口及html为自己的即可(下面主要展示js部分) <!DOCTYPE html><html> <head> <meta charset ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- vux-scroller实现移动端上拉加载功能
本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能: 纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态 ...
- 使用jquery结合ajax做下拉刷新页面,上拉加载页面,俗称分页
jquery结合iscroll.js做下拉刷新页面,上拉加载页面 先上代码,里面都有注释这就不一一说明了 <!DOCTYPE html> <html lang="en&qu ...
- jQuery上拉加载更多
<header id="header">首 页</header> <section id="main"> <ul id ...
随机推荐
- C#扩展方法类库StringExtensions
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- CentOS持久化二进制日志(systemd日志)
1.创建日志存储文件 /var/log/journal 2.改变存储文件属主属组 chown root:systemd-journal /var/log/journal/ 3.修改文件权限 chmod ...
- 美团CodeM复赛 02,03
02 城市网络 比赛时候写的是单调栈,真的是让人见笑了,基本思路就是dfs时候动态处理单调栈(带回溯),然后离线处理答案.题解是用了倍增的,效率高很多 #include <cstdio> ...
- 如何控制Bean对象的作用域,默认作用域是什么
1.可以通过<bean>定义的scope属性指定Bean对象的作用域或者使用注解@Scope指定Bean对象的作用域. 2.默认Bean对象的作用域为singleton.
- java继承方法规则或规律
方法的继承与属性的继承有很大的不同,属性任何继承方式均可,而方法则有各种限制,于是在这里做了一个简单的总结: 1.修饰符相同的方法覆盖,即只改内部,不改外部 2.访问权限不同的方法覆盖,子类只能相对父 ...
- 【JSOI2008】星球大战 (并查集)
题面 Description 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星 ...
- FTP环境搭建及客户代码调用公共方法封装
一.背景 大型系统架构往往被分解为多个独立可运行的组件, 以满足性能.可靠性.可扩展性的需求.多个组件间的数据交互往往采用两种方式:小量数据通过Sock函数.RMI.WebService等接口方式传递 ...
- jQuery中的自定义插件之----工厂方法(Factory Widget)
jQuery赋予了我们很强大的插件自定义的功能,可以作为我们的武器库,应用到所有的网页中,使用的语法比较有意思,下面是对它的一些探讨. 遵循以下的原则: 1 IIFE 创建一个jQuery的scope ...
- asp.net跳出iframe结构转向登录
在网页编程时,我们经常需要处理,当session过期时,我们要跳到登陆页面让用户登陆,由于我们可能用到IFrame框架,所以我们我登陆页面需要显示在整个页面,而不是一个IFrame中,大部分的网友是用 ...
- session、cookie与“记住我的登录状态”的功能的实现
Cookie的机制 Cookie是浏览器(User Agent)访问一些网站后,这些网站存放在客户端的一组数据,用于使网站等跟踪用户,实现用户自定义功能. Cookie的Domain和Path属性标识 ...