介绍一款移动端滚动加载的插件---dropload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
<link href="dropload-gh-pages/dist/dropload.css" rel="stylesheet">
<script src="dropload-gh-pages/examples/js/jquery.min.js"></script>
<script src="dropload-gh-pages/dist/dropload.min.js"></script>
<title>Title</title>
</head>
<body>
<div class="content">
<div class="lists"></div>
</div>
<script>
$(function(){
// 页数
var page = 0;
// 每页展示5个
var size = 5; // dropload
$('.content').dropload({
scrollArea : window,
loadDownFn : function(me){
page++;
// 拼接HTML
var result = '';
$.ajax({
type: 'GET',
url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
dataType: 'json',
success: function(data){
var arrLen = data.length;
if(arrLen > 0){
for(var i=0; i<arrLen; i++){
result += '<a class="item opacity" href="'+data[i].link+'">'
+'<img src="'+data[i].pic+'" alt="">'
+'<h3>'+data[i].title+'</h3>'
+'<span class="date">'+data[i].date+'</span>'
+'</a>';
}
// 如果没有数据
}else{
// 锁定
me.lock();
// 无数据
me.noData();
}
// 为了测试，延迟1秒加载
setTimeout(function(){
// 插入数据到页面，放到最后面
$('.lists').append(result);
// 每次数据插入，必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
}
});
});
</script>
</body>
</html>
介绍一款移动端滚动加载的插件---dropload的更多相关文章
- 基于jquery鼠标或者移动端滚动加载数据
基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
- vue2.0无限滚动加载数据插件
做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...
- js滚动加载小插件
本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...
- 介绍一款可以滚动加载的插件droploader
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]
使用方法 引用css和js <link rel="stylesheet" href="../dist/dropload.min.css"> < ...
- antd图标库按需加载的插件实现
前景概要 antd是阿里出品的一款基于antd的UI组件库,使用简单,功能丰富,被广泛应用在中台项目开发中,虽然也出现了彩蛋事故,但不能否认antd本身的优秀,而我们公司在实际工作中也大量使用antd ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- [转] Jquery滚动加载
原文地址:http://hi.baidu.com/vipxiaofan/item/9eb927b795671f77254b0985 另外一个asp.net的例子:http://blog.csdn.ne ...
随机推荐
- 解决vs 编译的bug“请检查是否是磁盘空间不足、路径无效或权限不够”
昨晚用vs编译遇到一个问题,编译一半发现硬盘没空间,一直重启vs,重启电脑, 删除pdb文件都没用,之后尝试重新生成解决方案,就解决了.这个是vs的一个bug
- 【转】pDc->SelectObject(pOldBrush)恢复画刷
请看下面的代码: CDC *pDc=new CClientDC(this); CBrush brush; brush.CreateSolidBrush(RGB(0,255,0)); CBrush * ...
- NOIP模拟赛 篮球比赛2
篮球比赛2(basketball2.*) 由于Czhou举行了众多noip模拟赛,也导致放学后篮球比赛次数急剧增加.神牛们身体素质突飞猛进,并且球技不断精进.这引起了体育老师彩哥的注意,为了给校篮球队 ...
- 浅谈 MySQL 中优化 SQL 语句查询常用的 30 种方法
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索 ...
- Centos7系统下安装Docker
1.确定你的Linux系统是Centos7 命令:cat /etc/redhat-release 2.yum安装gcc相关 1.配置好Centos7能上外网. 2.yum -y install gcc ...
- python-matplotlib-lec1
接演前文. 设置属性的方法: 使用对象的set_*方法,单独设置每个属性:或使用plt.setp同时设置多个属性 # -*- coding: utf-8 -*- import numpy as np ...
- JAVA、JDK等入门概念，下载安装JAVA并配置环境变量
一.概念 Java是一种可以撰写跨平台应用程序的面向对象的程序设计语言,具体介绍可查阅百度JAVA百科,这里不再赘述. Java分为三个体系,分别为: Java SE(J2SE,Java2 Platf ...
- iOS 9下支持的键盘类型：
http://blog.csdn.net/cloudox_/article/details/50532124
- 使用mysql监视器即命令行下的mysql
命令行下登录mysql 首先必须在alias下有设置mysql, 我的mysql安装的位置在/usr/local/mysql 于是做了一个别名: alias mysql='/usr/local/mys ...
- linuxlinux0.11源码学习——bootsect.s学习
由于一直想写一个自己的操作系统,网上推荐了<linux内核完全注释>.自学了一个星期,感觉这本书还是很好的,同时写下关于内核代码的理解,如果有什么不对的对方,欢迎大家一起来交流. 在内核引 ...