网页代码例如以下

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>滚动载入</title>

<style>

* {margin:0; padding:0; border:0;}

#container {width:960px; margin:auto;}

#container:after {display:block; height:0; content:''; clear:both;}

.item {width:300px; height:200px; float:left; margin:10px; background-color:yellow;}

</style>

</head>

<body>

<div id="container">

  <div class="item">1</div>

  <div class="item">2</div>

  <div class="item">3</div>

  <div class="item">4</div>

  <div class="item">5</div>

  <div class="item">6</div>

  <div class="item">7</div>

  <div class="item">8</div>

  <div class="item">9</div>

  <div class="item">10</div>

  <div class="item">11</div>

  <div class="item">12</div>

</div>

<script>

var time = new Date() * 1;  // 获取当前时间数值

window.onscroll = function(){

	h_window = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 获取视口高度

	h_document = document.documentElement.scrollHeight || document.body.scrollHeight;  // 获取网页高度

	h_scroll = document.documentElement.scrollTop || document.body.scrollTop;  // 获取页面的滚动高度

	var times = 0; // 成功请求的次数

	var xhr = new XMLHttpRequest();

	xhr.onreadystatechange = function(){

		if(xhr.readyState == 4){

			if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){

				// 在container最后一个子元素后面插入返回的HTML代码

				document.getElementById('container').insertAdjacentHTML('beforeEnd', xhr.responseText);

				times++;

			}

		}

	};

	xhr.open('get', 'scrolltoload.php', true);

	// 当 此次滚动于上次滚动间隔大于100毫秒 且 页面滚动高度+视口高度 > 网页高度 - 一个固定数值 时，载入新内容

	if((new Date() * 1 - time > 100) && (h_window + h_scroll > h_document - 50)){

		time = new Date() * 1;

		xhr.send(null);

	}

};

</script>

</body>

</html>

php文件代码例如以下

<div class="item">Ajax1</div>

<div class="item">Ajax2</div>

<div class="item">Ajax3</div>

<div class="item">Ajax4</div>

<div class="item">Ajax5</div>

<div class="item">Ajax6</div>

滚动载入server端内容——样例的更多相关文章

  1. 【UNIX网络编程（三）】TCP客户/server程序演示样例

    上一节给出了TCP网络编程的函数.这一节使用那些基本函数编写一个完毕的TCP客户/server程序演示样例. 该样例运行的过程例如以下: 1.客户从标准输入读入一行文本,并写给server. 2.se ...

  2. Oracle Tuxedo工作站客户端与服务端的样例程序

    服务端代码: #include <stdio.h> #include <stdlib.h> #include <string.h> #include <cty ...

  3. 【gRPC】C++异步服务端优化版，多服务接口样例

    官方的C++异步服务端API样例可读性并不好,理解起来非常的费劲,各种状态机也并不明了,整个运行过程也容易读不懂,因此此处参考网上的博客进行了重写,以求顺利读懂. C++异步服务端实例,详细注释版 g ...

  4. 移动端报表JS开发演示样例

    近期对移动端的报表开发颇有研究,细磨精算了好久,尽管到如今还是"囊中羞涩",但决定还是先抛砖引玉,拿点小干货出来和大家分享. 研究的工具是比較有代表性的FineReport. 1. ...

  5. 最简单的基于FFmpeg的移动端样例：Android HelloWorld

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  6. 最简单的基于FFmpeg的移动端样例：IOS 推流器

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  7. Android网络(3):HttpClient作client,Tomcat Servlet作server的交互演示样例

    前面相继介绍了Android网络编程里的Socket传输图片.HttpURLConnection,今天看HttpClient. 第一部分:JavaEE版的Eclipse配置Tomcat [备注:开发后 ...

  8. phpsocketclient以及server样例

    一个菜鸟朋友,突然问了我这个问题...如今稍稍有点时间,就写了一个简单的样例给他,顺便贴上来 server端: <? php /** * @author 邹颢 zouhao619@gmail.c ...

  9. 最简单的基于FFmpeg的移动端样例：Android 视频解码器-单个库版

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

随机推荐

  1. AutoIt简单使用

    以上是自己在公司做培训的PPT首页,其实在线的中文参考文档很全面,很值得学习的.

  2. redisd的非持久化配置

    如何关闭redis持久化?我的需求是只把redis当作缓存来用,所以持久化到硬盘对我的需求来说没有意义. 修改redis配置文件,redis.conf 第115行左右. 1.注释掉原来的持久化规则 # ...

  3. Ubuntu16.04 python3.4.3升级到python3.7.1

    python有两个版本,一个2版本,使用的是python:另一个是3版本,使用的是python3. 简易安装python后得到的3版本的版本号是python3.4.3. 可以使用下面的命令查看py版本 ...

  4. 第2节 mapreduce深入学习：8、手机流量汇总求和

    第2节 mapreduce深入学习:8.手机流量汇总求和 例子:MapReduce综合练习之上网流量统计. 数据格式参见资料夹 需求一:统计求和 统计每个手机号的上行流量总和,下行流量总和,上行总流量 ...

  5. ICMP协议和ping命令

    当网络不通的情况下,通常会想到ping命令,ping一下,但是ping命令内部如何执行的,可能并不清楚,其实ping是基于ICMP协议进行工作的.  一.ICMP协议的格式 ICMP是在RFC 792 ...

  6. 四种方案解决ScrollView嵌套ListView问题 [复制链接]

    以下文章转自@安卓泡面 在工作中,曾多次碰到ScrollView嵌套ListView的问题,网上的解决方法有很多种,但是杂而不全.我试过很多种方法,它们各有利弊. 在这里我将会从使用ScrollVie ...

  7. react入门（下）

    react生命周期 1. 组件的三个生命周期状态: * Mount:插入真实 DOM * Update:被重新渲染 * Unmount:被移出真实 DOM2. React 为每个状态都提供了两种勾子( ...

  8. 树莓派 -- oled 续（1） wiringPi

    在上文中,分析了wiringPi 的oled demo是使用devfs来控制spi master和spi slave通讯. https://blog.csdn.net/feiwatson/articl ...

  9. 爬虫框架urllib 之(二) --- urllib基础

    urllib 官方文档:https://docs.python.org/zh-cn/3/library/urllib.html urllib介绍 Urllib是python内置的HTTP请求库,是py ...

  10. Java恶搞！强制关闭电脑上的程序进程！

    效果 最近写代码经常和各种进程打交道,发现了一个很有意思的黑科技. 我直接说有什么用吧,可以设置每隔多少时间检查某个程序是否在使用,如果在用,就强制关闭.比如,有的sb舍友晚上就是不睡觉,一边打游戏一 ...