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 ...
随机推荐
- raw文件系统
简介 RAW文件系统是一个没有被NT文件系统(FAT或NTFS)格式化的磁盘分区(win8默认用的是RAW文件系统). 2定义 分区显示RAW文件系统的直接原因,是由于文件系统不被操作系统识别.此时在 ...
- Ubuntu 卸载cario-dock
偶然间听说别人用dock 可以把ubuntu美化,结果就装了个cairo-dock .结果是苹果mac的风格.不是很喜欢.于是就卸载,卸载过程中.发行卸载不掉. 尝试了很多方法. sudo apt-g ...
- dojo省份地市级联之省份封装类(一)
省份封装类 Province.java /** * 省份封装类 */ package com.you.model; import java.io.Serializable; /** * @author ...
- 如何获取Linux-gate.so.1动态库
前面"Linux应用程序Helloworld入门"已经提到在Linux下每个可执行文件都依赖于几个最为基本的动态库,其中一个就是linux-gate.so.1. 从上面ldd给出的 ...
- Error Code: 1630. FUNCTION rand.string does not exist
1.错误描述 13:50:13 call new_procedure Error Code: 1630. FUNCTION rand.string does not exist. Check the ...
- Linux查看网络的联机状态
Linux查看网络的联机状态 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ netstat -a^C unix 3 [ ] 流 已连接 14923 @/tmp ...
- java.sql.SQLException:ORA-01861:文字和格式字符串不匹配
1.错误描述 java.sql.SQLException:ORA-01861:文字和格式字符串不匹配 2.错误原因 字段名为statis_date在数据库中存储的数据类型是Date,而在Java中拼接 ...
- Django学习-3-请求流程
Django请求生命周期 -> URL对应关系(匹配) -> 视图函数 -> 返回用户字符串 -> URL对应关系(匹配) -> 视图函数 -> 打 ...
- Jupyter notebook Tensorflow GPU Memory 释放
Jupyter notebook 每次运行完tensorflow的程序,占着显存不释放.而又因为tensorflow是默认申请可使用的全部显存,就会使得后续程序难以运行.暂时还没有找到在jupyter ...
- 你该怎么选Offer
原文出处:http://www.360doc.com/content/15/1223/07/1209677_522436084.shtml 记录目的:自勉.分享 摘要 一段时间无数公司.无数投资人蜂拥 ...