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 ...
随机推荐
- linux内核initrd文件自定义方法
linux内核initrd文件自定义方法 重新编译内核后,可能加入了自定义的模块,就有可能需要修改init文件,而init文件就在initrd中,这里记录下操作步骤,以防遗忘. 1. cp /bo ...
- GJB150-2009军用装备实验室环境试验方法新版标准
http://www.kekaoxing.com/m/view.php?aid=22604 GJB150.1A-2009 军用装备实验室环境试验方法第1部分:通用要求(代替GJB150.1-86)GJ ...
- freemarker.core.InvalidReferenceException
1.错误描述 freemarker.core.InvalidReferenceException:on line 68,column 18 in ftl/inc/incPro.ftl p.mainSe ...
- Web.config中设置启用webservice远程调试访问
在.NET 中已经默认将webservice的远程调试功能关闭,有的时候我们需要远程调试程序的时候,就需要打开此功能我们只需在webservice的项目的中添web.config的<system ...
- .Net Core 1.0升级2.0(xproj项目迁移到.csproj )
vs2015的创建的项目是以*.xproj的项目文件,迁移到vs2017需要如下准备: 1.安装好vs2017(废话) 2.下载最新的SDK和 .NET Core 2.0 Preview 1 Runt ...
- 常用UI框架
jQuery Smart UI 链接地址:http://smartui.chinamzz.com Liger UI框架链接地址:http://www.ligerui.com/ DWZ富客户端框架(jQ ...
- BOM(浏览器对象模型)的一些操作
一个完整的JavaScript实现由三部分组成: ECMAScript:核心,定义语言基础,规定了语言的组成部分(语法,类型,关键字,保留字,对象等) DOM:文档对象模型,·DOM把整个页面映射成一 ...
- ontimer 与多线程
一般来说,在MFC中开启一个UI线程可以用以下代码: m_pCameraThread = AfxBeginThread(RUNTIME_CLASS(CCameraThread)); if (!m_pC ...
- View的平移、缩放、旋转以及位置、坐标系
原创 2015年05月12日 13:15:29 标签: Android / Scroll / Scale / Translation / Rotation 24733 Android开发中,经常会接触 ...
- 创建元素节点createElement
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...