通过window.onscroll 滚动来加载内容
滚动游览器滚动条会触发 window.onscroll 滚动事件,来加载内容
抛弃所有限制代码,那么就剩下 window.onscroll 滚动事件,就立即触发加载内容
window.onscroll -> 判断每次滚动是否到页面底部 -> 准备加载,初始化其他数据
new Object() 空项目;
with 对的元素相同属性缩码
window.onscroll 滚动事件
document.createElement 创建元素
parseInt 转化为整型
window.setTimeout window.clearTimeout 对称关系,有设置set就要清除clear
Math.max 比较大小,取最大值返回
两个数字之间求余 使用“%”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Javascript 滚动加载区域数据 (非jQuery)</title>
</head>
<body>
<table width="950" border="1" align="center" cellpadding="0" cellspacing="0" id="Table">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script>
var obj = new Object();
obj.IsGetData = false; //是否存在数据加载
obj.Time = 0; //时间声明(模拟)
obj.Index = 1; //编码序号
obj.div=null;
//-------------------------------
// 名 称:window.onscroll,
// 描 述:游缆器滚动事件
//-------------------------------
window.onscroll = function() {
if (uiIsPageBottom() && !obj.IsGetData) {
//状态;
obj.IsGetData = true;
// 知识点:document.createElement 创建元素
// 加载进度条
var div = document.createElement("div");
div.innerHTML = "正在加载数据中..." + obj.Index;
with(div.style) {
position = "absolute";
left = "0px";
height = "auto";
width = "auto";
fontSize = "12px";
backgroundColor = "#666666";
color = "#FFFFFF";
// 知识点:parseInt 转化为整型
// 对元素滚动定位处理
top = parseInt(document.documentElement.scrollTop, 10) + "px";
}
document.body.appendChild(div);
obj.div = div;
//模拟Ajax加载;
obj.Time = window.setTimeout('GetAjaxData()', 3000); //模拟Ajax加载;使用Ajax数据注释掉本行
}
if (obj.IsGetData) {
obj.div.style.top = parseInt(document.documentElement.scrollTop, 10) + "px";
}
}
//-------------------------------
// 名 称:GetAjaxData
// 描 述:模式Ajax加载数据
//-------------------------------
function GetAjaxData() {
// 知识点:cloneNode(true) 克隆元素
var table = document.getElementById("Table").cloneNode(true);
// 用于渐变内容区分,知识点: 两个数字之间求余 使用“%”
table.style.backgroundColor= (obj.Index%2==0?"#999999":"#FFFFFF");
document.body.appendChild(table);
//状态
if (true) {
// 知识点: window.setTimeout window.clearTimeout 对称关系,有设置set就要清除clear
// (时间长了耗费系统内存,有可能回导致IE崩溃,所以清除时间点,使用Ajax返回数据注释掉本行)
if (obj.Time != 0) window.clearTimeout(obj.Time);
document.body.removeChild(obj.div);
}
obj.IsGetData = false;
obj.Index++;
}
//-------------------------------
// 名 称:uiIsPageBottom
// 描 述:判断是滚动到页面底部
//-------------------------------
function uiIsPageBottom() {
var scrollTop = 0;
var clientHeight = 0;
var scrollHeight = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
} else {
clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
}
// 知识点:Math.max 比较大小,取最大值返回
scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
if (scrollTop + clientHeight == scrollHeight) {
return true;
} else {
return false;
}
}
</script>
</body>
</html>
分享到:
相关推荐
给需要滚动加载的图片添加上data-url属性,值为图片的真实地址,src属性填写一张默认图片的地址。 方法引用 确定好一个有固定高度,且有滚动条的块级元素后,调用方法imgRunLoading(string id,boolean isConstant)...
类似校内网,微博 js延时加载,滚动条,随滚动条逐渐显示信息
主要为大家详细介绍了iscroll.js滚动加载实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
纯js 无限滚动加载页面数据,手机端无限滚动加载,手机端无限滚动加载
参数说明 listLoadingMore({id:"",id2:function(){},...loading():根据当前滚动条的位置,自动判断是否需要加载新数据; show(boolean,boolean):强制设置加载中和加载完成dom的显示或隐藏,true表示显示,false相对。
JS即时加载,当用到图片时才加载,只加载当前屏幕的图片 随着页面滚动加载当前屏幕图片
CSS3网页滚动瀑布流图片加载动画特效是一款WOW.js基于css3动画库属性制作的页面向下滚动时产生的图片载入动画效果。
高性能滚动 scroll 及页面渲染优化,使用 requestAnimationFrame优化页面滚动。
JavaScript实现滚动加载更多 本文实例为大家分享了JavaScript实现滚动加载更多的具体代码,供大家参考,具体内容如下 vscode index: <!DOCTYPE html> <html lang="en"> <head> ...
无依赖,配置简单,有多套滚动加载效果可选(需要单独引入对应的css,当然也有默认效果) 在ios中,全局滚动会有很多不好的体验,我认为是可以用局部滚动来替代全局的。局部滚动也会有几个坑,但都是可解决的,也...
一个屏幕滚动加载的js包,很好用,不用资源分的哦,快下载吧
jQuery无限滚动加载图片瀑布流代码基于jquery-2.0.3.js制作,自适应屏幕分辨率,鼠标滚动图片无限加载。
基于vue的移动端下拉刷新上拉无限滚动加载的高度定制化插件
主要为大家详细介绍了JavaScript实现无穷滚动加载数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
MingGe.scrollLoad图片滚动插件运行速度非常快, demo.html演试采用的大量图片以瀑布流形式滚动测试,同类型插件,滚动时超级卡,而且BUG较多(我只演试了3-4个同类型的插件)。 而MingGe.scrollLoad 滚动时,则非常...
页面滚动到底部自动加载数据功能模拟,HTML5+Jquery,需要的下载看一下
由小码农整理分享 网址:https://www.code-elf.cn/ 有的页面在上下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。
由于工作的需要并鉴于网上的vue.js滚动加载方案不合适,自己写了一个简单实用的。就短短的150行代码。 组件代码 // scrollLoader.vue // 滚动加载组件 <style scoped> .container-main {margin: 0 auto; ...
这个案例每次都有用到,就记录了下来也和大家分享下;欢迎下载