<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. linux内核initrd文件自定义方法

    linux内核initrd文件自定义方法 重新编译内核后,可能加入了自定义的模块,就有可能需要修改init文件,而init文件就在initrd中,这里记录下操作步骤,以防遗忘. 1.  cp  /bo ...

  2. GJB150-2009军用装备实验室环境试验方法新版标准

    http://www.kekaoxing.com/m/view.php?aid=22604 GJB150.1A-2009 军用装备实验室环境试验方法第1部分:通用要求(代替GJB150.1-86)GJ ...

  3. freemarker.core.InvalidReferenceException

    1.错误描述 freemarker.core.InvalidReferenceException:on line 68,column 18 in ftl/inc/incPro.ftl p.mainSe ...

  4. Web.config中设置启用webservice远程调试访问

    在.NET 中已经默认将webservice的远程调试功能关闭,有的时候我们需要远程调试程序的时候,就需要打开此功能我们只需在webservice的项目的中添web.config的<system ...

  5. .Net Core 1.0升级2.0(xproj项目迁移到.csproj )

    vs2015的创建的项目是以*.xproj的项目文件,迁移到vs2017需要如下准备: 1.安装好vs2017(废话) 2.下载最新的SDK和 .NET Core 2.0 Preview 1 Runt ...

  6. 常用UI框架

    jQuery Smart UI 链接地址:http://smartui.chinamzz.com Liger UI框架链接地址:http://www.ligerui.com/ DWZ富客户端框架(jQ ...

  7. BOM(浏览器对象模型)的一些操作

    一个完整的JavaScript实现由三部分组成: ECMAScript:核心,定义语言基础,规定了语言的组成部分(语法,类型,关键字,保留字,对象等) DOM:文档对象模型,·DOM把整个页面映射成一 ...

  8. ontimer 与多线程

    一般来说,在MFC中开启一个UI线程可以用以下代码: m_pCameraThread = AfxBeginThread(RUNTIME_CLASS(CCameraThread)); if (!m_pC ...

  9. View的平移、缩放、旋转以及位置、坐标系

    原创 2015年05月12日 13:15:29 标签: Android / Scroll / Scale / Translation / Rotation 24733 Android开发中,经常会接触 ...

  10. 创建元素节点createElement

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...