介绍一款可以滚动加载的插件droploader
<!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>
介绍一款可以滚动加载的插件droploader的更多相关文章
- vue2.0无限滚动加载数据插件
做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...
- js滚动加载小插件
本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...
- 介绍一款移动端滚动加载的插件---dropload
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [转] Jquery滚动加载
原文地址:http://hi.baidu.com/vipxiaofan/item/9eb927b795671f77254b0985 另外一个asp.net的例子:http://blog.csdn.ne ...
- 简易数据分析 10 | Web Scraper 翻页——抓取「滚动加载」类型网页
这是简易数据分析系列的第 10 篇文章. 友情提示:这一篇文章的内容较多,信息量比较大,希望大家学习的时候多看几遍. 我们在刷朋友圈刷微博的时候,总会强调一个『刷』字,因为看动态的时候,当把内容拉到屏 ...
- HTML5商城开发一 楼层滚动加载数据
对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度( ...
- js 滚动加载iframe框中内容
var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest; //滚动加载 var scrollLoad =function( ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- 记录WEUI中滚动加载的一个BUG
最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...
随机推荐
- 如何用eclipse运行导入的maven项目
1.配置jdk系统环境变量.找到安装的jdk的安装目录,新建系统环境变量,变量名为JAVA_HOME(作为一个引用),变量值为该路径. 找到Path,将%JAVA_HOME%/bin; 添加到变量值的 ...
- [原创]使用python对视频/音频文件进行详细信息采集,并进行去重操作
[原创]使用python对视频/音频文件进行详细信息采集,并进行去重操作 转载请注明出处 一.关于为什么用pymediainfo以及pymediainfo的安装 使用python对视频/音频文件进行详 ...
- 机顶盒demux的工作原理
在机顶盒中demux部分相对来说是比较复杂的部分,对于机顶盒软件开发的新手来说通常在这里会遇到一些困难,今天特意研究了一下驱动层代码,有一点自己的理解,因此写下来记录一下学习过程. 机顶盒中数据是如何 ...
- [USACO]Bovine Genomics
Description 给定两个字符串集合A,B,均包含N个字符串,长度均为M,求一个最短的区间[l,r],使得不存在字符串\(a\in A,b\in B,\)且\(a[l,r]=b[l,r]\) , ...
- ZeroClipboard_copy
//<script src="js/ZeroClipboard.js" type="text/javascript"></script> ...
- php和js中数组的总结
php中数组的表示方法:array()或者[] js中数组的表示方法:new array()或者[] 一.php中初始化命名数组 在PHP中声明数组的方式主要有两种:一是应用array()函数声明 ...
- Struts之上传
上传的jsp写法: <tr> <td width="50%" align="left">软件上传: <input type=&qu ...
- Robotium接入到Jenkins持续集成自动化测试
6.3 将测试用例接入到Jenkins 由于我是自己学习的手机自动化测试,没有实际投入到工作中使用,jenkins的接入也没有具体操作,现摘抄一下网页:http://www.tuicool.com/a ...
- Xmanager用法（export DISPLAY=客户端IP:0.0）
1.在用户的目录下找到文件.bash_profile或profile,用vi对其进行编辑.加入下列命令行: DISPLAY=192.168.88.71:0.0;export DISPLAY 2.如果只 ...
- python 抽象类和接口类
一.接口类 继承的两种用途: 1.继承基类的方法,并且做出自己的改变或者扩展(代码重用) 2.声明某个子类兼容于某个基类,定义一个接口类interface,接口类中定义了一些接口名(就是函数 名) ...