<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. c# 处理空白字符,空白字符是指在屏幕不会显示出来的字符

    空白字符是指在屏幕不会显示出来的字符(如空格,制表符tab,回车换行等).空格.制表符.换行符.回车.换页垂直制表符和换行符称为 "空白字符",因为它们为与间距单词和行在打印的页 ...

  2. 从html页面加载顺序来更好的理解jquery初始化

    一,html页面加载顺序 1,用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件:2,浏览器开始载入html代码,发现<head>标签内 ...

  3. 申请Jetbrain教育帐号,免费使用一年

    JetBrains是一家捷克的软件开发公司.旗下IDE产品有(不限于):(1) IntelliJ,IDEA  Java集成开发工具:(2) PHPStorm,PHP 集成开发工具:(3) PyChar ...

  4. canvas焰火特效

    之前在抖音上看到了一个很漂亮的焰火效果.这会儿有时间就用canvas实现了一下. 演示地址:http://suohb.com/work/firework4.htm 先看效果:(静态图片看不太出效果,请 ...

  5. [USACO13NOV]没有找零No Change [TPLY]

    [USACO13NOV]没有找零No Change 题目链接 https://www.luogu.org/problemnew/show/3092 做题背景 FJ不是一个合格的消费者,不知法懂法用法, ...

  6. 【SPOJ】Longest Common Substring II (后缀自动机)

    [SPOJ]Longest Common Substring II (后缀自动机) 题面 Vjudge 题意:求若干个串的最长公共子串 题解 对于某一个串构建\(SAM\) 每个串依次进行匹配 同时记 ...

  7. linux系统文件扩展名介绍

    1.源码tar.tar.gz .tgz.zip.tar.bz 表示压缩文件,创建命令等 2.sh表示shell脚本文件,通过shell语言开发的程序. 3.pl 表示perl语言文件,通过perl语言 ...

  8. 算法精解:DAG有向无环图

    DAG是公认的下一代区块链的标志.本文从算法基础去研究分析DAG算法,以及它是如何运用到区块链中,解决了当前区块链的哪些问题. 关键字:DAG,有向无环图,算法,背包,深度优先搜索,栈,BlockCh ...

  9. Centos7中hadoop配置

    Centos7中hadoop配置 1.下载centos7安装教程: http://jingyan.baidu.com/article/a3aad71aa180e7b1fa009676.html (注意 ...

  10. Attempt to invoke interface method 'boolean java.util.List.add(java.lang.Object)' on a null object reference

    尝试在一个空的对象引用上引用boolean java.util.List.add()这个方法: 错误例子: private ArrayList<String> classList; cla ...