js 根据滚动条加载数据
很久没记笔记了,最近搞起web开发了
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function insertcode() {
var $body = $("body");
$body.append('<div style=\" height:1000px; font-size:24px;\">新增项目</div>')
$("#page_tag_load").hide();
}
$(document).ready(function () {
$(window).scroll(function () {
var $body = $("body");
var $html = "";
$html += "<br/>" + ($(window).height() + $(window).scrollTop());
$html += "<br/>window.height: " + $(window).height();
$html += "<br/>body.height: " + $body.height();
$html += "<br/>window.scrollTop: " + $(window).scrollTop();
$("#page_tag_bottom").html($html);
/*判断窗体高度与竖向滚动位移大小相加 是否 超过内容页高度*/
if (($(window).height() + $(window).scrollTop()) >= $body.height()) {
$("#page_tag_load").show();
//setTimeout(insertcode, 1000);/*IE 不支持*/
insertcode();
}
});
});
</script>
</head>
<body>
<div style=" height:1000px; font-size:24px;">新增项目</div>
<div id="page_tag_bottom" style=" width:100%; position:fixed; top:0px; background-color:#cccccc;height:100px;"></div>
<div id="page_tag_load" style=" display:none; font-size:14px;position:fixed; bottom:0px; background-color:#cccccc;height:50px;">加载中...</div>
</body>
</html>
以上代码根据滚动条位置触发一个insertcode(),函数,这个函数可以用ajax,获取服务器接口数据,然后重绘dom
js 根据滚动条加载数据的更多相关文章
- vue 中监测滚动条加载数据(懒加载数据)
vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...
- Vue.js中滚动条加载更多数据
本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.cl ...
- jquery滚动条加载数据
//滚动条 $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $( ...
- js滚动异步加载数据的思路
<body> <div style="width:200px; height:1000px; border:1px solid red;" id="to ...
- Highcharts 异步加载数据曲线图表
导入 data.js 文件 异步加载数据需要引入以下js 文件: <script src="http://code.highcharts.com/modules/data.js&quo ...
- Highcharts 基本曲线图;Highcharts 带有数据标签曲线图表;Highcharts 异步加载数据曲线图表
Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="U ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- js实现滚动条来动态加载数据
主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...
随机推荐
- 命令“regsvr32 /s /n /i:user "XXXXXX"”已退出,代码为 3
问题:命令“regsvr32 /s /n /i:user "F:\XXXXXXXXXXXXXXXXX\Release\One.ocx"”已退出,代码为 3 解决方法: The is ...
- solr的post.jar
http://iamyida.iteye.com/blog/2207920 跟益达学Solr5之玩转post.jar
- js入门之内置数组对象 Array
一. 数组 1. 创建数组的两种方式 1. 数组字面量 var array = [] 2. 数组的构造函数创建数组 var array = new Array(); 2. 如何判断一个变量是否是数组 ...
- 2019最新Web前端经典面试试题(含答案)
1,阐述清楚浮动的几种方式(常见问题)(1)父级div定义 height原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题. 优点:简单.代码少.容易掌握 缺点:只适合高 ...
- Apache老版本下载地址
有时候我们想做测试或者使用旧版本软件时,往往发现官方网站已经下架,以Apache为例: Apache旧版本下载地址:http://archive.apache.org/dist/httpd/ .... ...
- rabbitmq笔记(一)rabbitmq简介及基础
一.消息组件 如果从消息组件来讲主要划分位两类: 1.JMS组件:ActiveMQ(慢): 2.AMQP组件(协议):性能是最高的, 而AMQP有两个主要的开源: 1)RabbitMQ:使用最广泛,速 ...
- Python基础——细琐知识点
注释 Python注释有两种方式 使用# 类似于Shell脚本的注释方式,单行注释 使用'''或者""" 使用成对的'''或者""".这种注 ...
- Nmap一些参数的具体作用
目标说明 1234 -iL <inputfilename> 读取文档-iR <hostnum> 随机选择目标--exclude <host1[,host2][,...]& ...
- leetcode刷题-1
小A 和 小B 在玩猜数字.小B 每次从 1, 2, 3 中随机选择一个,小A 每次也从 1, 2, 3 中选择一个猜.他们一共进行三次这个游戏,请返回 小A 猜对了几次? 输入的guess数组为 小 ...
- Vim使用技巧(0) -- 博主的vim配置
vim ~/.vimrc "插入模式时 光标的上下左右移动 inoremap <C-l> <Right> inoremap <C-h> <Left& ...