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 ...
随机推荐
- R语言︱数据去重
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:unique对于一个向量管用,对于m ...
- com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxError Exception
1.错误描述 com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxError Exception:You have an error in your SQL synt ...
- httpclient案例一(调用识别接口)
public Map<String, Object> pictureRecognition(String recotype, MultipartFile imageFile) { Stri ...
- 【原】如何获取Java动态生成类?
写作目的:Java大部分框架,如Spring,Hibernate等都会利用动态代理在程序运行的时候生成新的类, 有的时候为了学习,或者深入了解动态代理,想查看动态生成类的源代码究竟长怎么个样子, 通过 ...
- RobotFramework自动化测试框架-常用断言关键字
断言关键字 描述 Should Be Empty 判断是否为空,如果不为空,执行失败,示例: ${value} Set Variable Hello Should Be Empty ${value} ...
- 元素(WebElement)-----Selenium快速入门(三)
上一篇<元素定位-----Selenium快速入门(二)>说了,如何定位元素,本篇说说找到的元素(WebElement)该怎么用. WebElement常用方法: 返回值 方法名 说 ...
- 【BZOJ2843】极地旅行社(Link-Cut Tree)
[BZOJ2843]极地旅行社(Link-Cut Tree) 题面 BZOJ 题解 \(LCT\)模板题呀 没什么好说的了.. #include<iostream> #include< ...
- 【BZOJ3671】【NOI2014】随机数据生成器(贪心)
[BZOJ3671][NOI2014]随机数据生成器(贪心) 题面 BZOJ 题解 前面的模拟 真的就是语文阅读理解题目 理解清楚题目意思 然后就会发现要求的就是一个贪心 从小往大枚举,检查当前数能不 ...
- 【Luogu1879】玉米田(状态压缩,动态规划)
懒得搞题目了 哦对了,这题双倍经验 题解 装压DP 利用位运算很容易解决相邻位的问题 其实我的还是太复杂了 具体的,更加好的位运算的写法可以参考YL大佬,但是我也搞不到他代码,因为他太强了. 然而他博 ...
- linux优化项
Linux优化: 1.建立普通账号,使用普通用户登陆. 2.处理SELINUX. 3.处理防火墙. 4.精简开机自启动服务.保留sshd,network,crond,rsyslog,sysstat. ...