用ajax写无限循环,ajax无限循环
// 猜你喜欢的无限加载
(function(){
var content = document.getElementsByClassName("content")[0];
var footer = document.getElementsByTagName("footer")[0];
var winh = window.innerHeight - footer.offsetHeight;
var ul = document.getElementById("like-ul");
var isFinish = false;
/*
* describe: 创建加载的文档碎片,并且插入到content
* arguments : content , 要插入到的容器
* return :返回插入的div
*/
function appendLoading(content){
var fragment = document.createDocumentFragment();
var wrap = document.createElement("div");
var img = document.createElement("img");
var span = document.createElement("span");
wrap.className = "loading";
img.src = "img/icon_loading.png";
span.innerHTML = "正在加载";
wrap.appendChild(img);
wrap.appendChild(span);
fragment.appendChild(wrap);
content.appendChild(fragment);
return wrap;
}
//往content插入文档碎片
var loading = appendLoading(content);
var loadTop = 0;
//判断正在加载是否出现在屏幕
content.addEventListener("scroll",function(){
loadTop = loading.getBoundingClientRect().top;
if(loadTop < winh && !isFinish){
ajaxLoad();
isFinish = true;
}
});
// ajax加载数据
function ajaxLoad(){
//创建一个ajax对象
var xhr = new XMLHttpRequest();
// 需要请求的链接 / 文件(html.json)
xhr.open("get","goods.json",true);
// 绑定一个change监听事件
xhr.onreadystatechange = function(){
//当请求完成( =4)并且请求成功( =200)
if(xhr.readyState == 4 && xhr.status == 200){
//接收请求回来的文本
var res = xhr.responseText;
var obj = JSON.parse(res);
var html = "";
for(var key in obj){
html += ‘
‘+ obj[key]["describe"] +‘
¥‘+ obj[key]["price"] +‘¥‘+ obj[key]["s"] +‘‘;
}
setTimeout(function(){
ul.insertAdjacentHTML("beforeEnd",html);
isFinish = false;
},2000);
}
}
// 一个命令 开发发送
xhr.send(null);
}
}());
原文:http://www.cnblogs.com/yuyuhang/p/6417169.html
用ajax写无限循环,ajax无限循环相关推荐
- python遍历循环和无限循环结构_Python --- 程序的循环结构
1.遍历循环 2.无限循环 3.循环控制保留字 4.循环的高级用法 1.遍历循环 遍历某个结构形成的循环运行方式 for in : - 从遍历结构中逐一提取元素,放在循环变量中 - 完整遍历所有元素后 ...
- python遍历循环和无限循环结构_Python通过for、while等保留字提供遍历循环和无限循环结构...
Python通过for.while等保留字提供遍历循环和无限循环结构 答:√ 血清和血浆的主要区别在于血清缺乏 答:纤维蛋白原 景区讲解员上岗前准备之一:佩戴好本景区导游证的标志 答:× ()决定着社 ...
- 易语言 循环判断 无限循环 参数传值调用子程序
新人不可错过 .版本 2 .支持库 spec .子程序 _按钮1_被单击, , , , .局部变量 传值给子程序测试, 整数型 传值给子程序测试 = 10 ' 把10赋值给"变量" ...
- python无限循环条件循环_Python - 条件控制、循环语句 - 第十二天
Python 条件控制.循环语句 end 关键字 关键字end可以用于将结果输出到同一行,或者在输出的末尾添加不同的字符,实例如下: Python 条件语句是通过一条或多条语句的执行结果(True 或 ...
- 【C 语言】文件操作 ( 配置文件读写 | 框架搭建 | 主函数逻辑结构 | 启动无限循环 | 接收用户操作值 | 宏定义 | 显示操作菜单 )
文章目录 一.主函数逻辑结构 1.启动无限循环 2.接收用户操作值 3.主函数代码示例 二.宏定义声明 三.显示操作菜单 一.主函数逻辑结构 在 main 函数中 , 启动一个无限循环 , 不断的接收 ...
- while循环+无限循环.py
while 循环和for循环不同的是,它的停止条件是个人自己设定的: while 判断条件:执行语句 while循环大致组合为:初始值 循环条件 改变初始值 在确定满足条件而不确定需要的循环次数时,w ...
- python哨兵循环_Python通用循环的构造方法实例分析
本文实例讲述了python通用循环的构造方法.分享给大家供大家参考,具体如下: 1.交互循环 是无限循环的一种,允许用户通过交互的方式程序的特定部分: def main(): sum =0.0 cou ...
- Python循环语句(while循环、for循环)
Python循环语句 一.while循环 二.for语句 三.range()函数 四.break 和 continue 语句 五.pass语句 Python循环语句主要有while循环和for循环,P ...
- python循环语句——while循环
python循环语句--while循环 前言 前言 Python中除了for循环之外,还有一个while循环.虽然都是循环,for循环主要用于遍历,但是while循环主要用于循环执行程序,即在满足某个 ...
- php循环读取mysql_PHP无限循环获取MySQL数据
本篇文章主要介绍PHP无限循环获取MySQL数据的方法,感兴趣的朋友参考下,希望对大家有所帮助. 具体如下: public function get_data($limit){ $sql=" ...
最新文章
- 009 数据结构逆向—数组(困难版)
- 编程能力强化(4)——模拟SQL语句解析
- 问题 B: 十进制到二进制的转换
- Kafka集群安装Version1.0.1(自带Zookeeper)
- feign 序列化_Spring Boot和Feign中使用Java 8时间日期API(LocalDate等)的序列化问题...
- demo2 Kafka+Spark Streaming+Redis实时计算整合实践 foreachRDD输出到redis
- vijos 1002
- 31、当当图书榜单爬虫
- 百度这个写在控制台的消息:2021百度校招
- 进击的海姆达尔Heimdallr,2021年链游最后一趟财富专列
- python乒乓球比赛规则介绍_乒乓球比赛规则简单介绍
- 22-02-08数据库迁移sql问题
- [Winows 软件推荐] 四款常用精品的软件
- micropython按键检测_TM1650按键扫描
- Qt调用exit()、quit()不生效问题
- 福禄克DSX2-8000 DSX2-5000 业以太网连接器集锦DSX-CHA021S
- 『十年树木 百年树人』最好的机会AI最牛的你!
- 机器学习实现矿物识别(第二周)
- HTML教程入门经典
- Codeforces630C【水题】
热门文章
- 常见Java错误的十大列表(前100名!)
- 100份Spring面试问答-最终名单(PDF下载)
- 具有可执行Tomcat的独立Web应用程序
- 可为空的对象必须具有一个值_前端:这里有8个常见的JavaScript经典问题,总有一个你不会的...
- Linux系统下MySQL的导出数据语句SELECT … INTO OUTFILE的用法
- HH SaaS电商系统的标签系统设计
- Thread 线程同步、线程状态
- 温度补偿计算公式_一种工业用温度测量模块的设计与实现
- php通过ajax下载文件,通过ajax调用php下载文件
- FFmpeg NDK跨平台交叉编译