<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代码实现上拉加载(不使用插件)的更多相关文章

  1. jquery 和 mui 上拉加载

    jquery: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...

  2. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  3. 用jquery写一个上拉加载

    /*可加载页面吗*/function canLoadMore() { return $('.loadin').length < 1;}/*移除正在加载字样*/function removeMor ...

  4. 【前端】上拉加载更多dropload.min.js的使用

    代码如下:入职代码修改接口及html为自己的即可(下面主要展示js部分) <!DOCTYPE html><html> <head> <meta charset ...

  5. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  6. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  7. vux-scroller实现移动端上拉加载功能

    本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能: 纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态 ...

  8. 使用jquery结合ajax做下拉刷新页面,上拉加载页面,俗称分页

    jquery结合iscroll.js做下拉刷新页面,上拉加载页面 先上代码,里面都有注释这就不一一说明了 <!DOCTYPE html> <html lang="en&qu ...

  9. jQuery上拉加载更多

    <header id="header">首 页</header> <section id="main"> <ul id ...

随机推荐

  1. Android View绘制回调方法流程

    Android中View的性命周期,挪用 invalidate() 战 requestLayout() 会触收哪些方式,一张图就可以讲解的很详细. 该图确切一看便特别很是清楚.让人简略的懂得View的 ...

  2. RFM模型+SOM聚类︱离群值筛选问题

        笔者寄语:一般情况下离群值不应该直接删除,应该进行筛选,然后进行专门的离群值分析.笔者在这进行一下思考,在聚类基础之上的一种离群点检验. 基于聚类的离群点检测的步骤如下:数据标准化--聚类-- ...

  3. Caused by: com.mysql.jdbc.MysqlDataTruncation: Data truncation: Truncated incorrect DOUBLE value: 'L

    1.错误描述 [ERROR:]2015-06-08 09:49:42,523 [异常拦截] org.hibernate.exception.DataException: error executing ...

  4. Caused by: org.h2.jdbc.JdbcSQLException: Table "T_STUDENT_INFO" not found; SQL statement

    1.错误描述 org.hibernate.exception.SQLGrammarException: error executing work at org.hibernate.exception. ...

  5. 芝麻HTTP:批量部署Splash负载集群

    安装Ansible: 看官方文档去:http://www.ansible.com.cn/index.html 好像这个主控端不支持Windows? 大家虚拟机装个Ubuntu吧. 闲话少扯直接上干货: ...

  6. 芝麻HTTP: Python爬虫利器之Requests库的用法

    前言 之前我们用了 urllib 库,这个作为入门的工具还是不错的,对了解一些爬虫的基本理念,掌握爬虫爬取的流程有所帮助.入门之后,我们就需要学习一些更加高级的内容和工具来方便我们的爬取.那么这一节来 ...

  7. 系统架构以及需要导入的jar包

    架构: Servlet +JSP +JavaBean +JDBC 需要导入的jar包: MYSQL: 数据库驱动 C3PO连接池: (这个需要配置文件) C3PO DBUtils:特点:轻量级首选,增 ...

  8. Monkeyscript---获取包名主界面名和位置坐标

    一.monkey随机事件有三类:点击.输入.手势 二.Monkeyscript难点:如何获取坐标 三.Monkeyscript API: 1.轨迹球(手势)事件: DispatchTrackball( ...

  9. 在.Net Core中使用MongoDB的入门教程(一)

    首先,我们在MongoDB的官方文档中看到,MongoDb的2.4以上的For .Net的驱动是支持.Net Core 2.0的. 所以,在我们安装好了MangoDB后,就可以开始MangoDB的.N ...

  10. Car HDU - 5935

    Problem Description Ruins is driving a car to participating in a programming contest. As on a very t ...