页面滚动加载内容

最新推荐文章于 2024-04-21 09:58:22 发布
最新推荐文章于 2024-04-21 09:58:22 发布
阅读量754 收藏 1
点赞数
分类专栏： php jquery 文章标签： ajax json
jquery 同时被 2 个专栏收录
44 篇文章 0 订阅
订阅专栏
php
14 篇文章 0 订阅
订阅专栏

帮同事修改bug 的 小函数，不知道起初是谁写的

<!doctype html>
<html>
<meta charset="UTF-8">
<title>php+jquery+ajax+json简单小例子</title>
<head>
<style>
#container {
	border: 1px solid #999;
	margin: 10px auto;
	width: 660px;
}
.single_item {
	border-bottom: 1px dotted #d3d3d3;
	padding: 20px;
}
.author {
	color: #39f;
	font-weight: bold;
	left: 0;
	position: absolute;
}
.date {
	color: #999;
	position: absolute;
	right: 0;
}
.content {
	line-height: 20px;
	word-break: break-all;
}
.element_head {
	height: 20px;
	position: relative;
	width: 100%;
}
.nodata {
	color: #999;
	display: none;
	font-size: 14px;
	height: 32px;
	line-height: 32px;
	text-align: center;
}
</style>
</head>
<body>
<div id="container">
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-09 16:17</div>
      <div class="author">demo3</div>
    </div>
    <div class="content">上的发生</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-09 16:17</div>
      <div class="author">demo1</div>
    </div>
    <div class="content">上的发生的</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-09 12:49</div>
      <div class="author">demo1</div>
    </div>
    <div class="content">dfgdfgdfgdfgdfg</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-09 12:49</div>
      <div class="author">demo2</div>
    </div>
    <div class="content">dfgdfgdfg</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-09 12:49</div>
      <div class="author">demo3</div>
    </div>
    <div class="content">dgdfgdfgdfgdg</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-09 12:49</div>
      <div class="author">demo1</div>
    </div>
    <div class="content">fgfdfgdfg</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-09 11:54</div>
      <div class="author">demo2</div>
    </div>
    <div class="content">所发生的</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-08 23:34</div>
      <div class="author">demo1</div>
    </div>
    <div class="content">寺夺震</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-08 18:00</div>
      <div class="author">demo2</div>
    </div>
    <div class="content">123456 </div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-08 18:00</div>
      <div class="author">demo3</div>
    </div>
    <div class="content">这场戏</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-08 17:18</div>
      <div class="author">demo2</div>
    </div>
    <div class="content">hello</div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-08 11:58</div>
      <div class="author">demo4</div>
    </div>
    <div class="content">就这样长大了 </div>
  </div>
  <div class="single_item">
    <div class="element_head">
      <div class="date">10-08 11:58</div>
      <div class="author">demo2</div>
    </div>
    <div class="content">简简单单的孩子</div>
  </div>
</div>
<div class="nodata"></div>
</body>
</html>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">  
$(function(){ 
	var winH = $(window).height(); //页面可视区域高度 
  //之前这里没有设置文件头<!doc type>  $(window).height()获取到的是文档的高度

	var i = 1; //设置当前页数
	
  var load = true;//此处定义load  防止重复加载. 此处初始化，第一次滚动时即可触发加载
  
  $(window).scroll(function () { 
    var pageH = $(document.body).height(); 
    var scrollT = $(window).scrollTop(); //滚动条top
    var aa = (pageH-winH-scrollT)/winH;

		if(aa<0.02 && load===true){ 
      load = false;   //在该次请求处理完之前load为false，页面的滚动不会加载
			$.getJSON('data.php',{page:i},function(json){ 
				if(json){ 
					var str = ""; 
					$.each(json,function(index,array){ 
						str += "<div class='single_item'><div class='element_head'>"; 
						str += "<div class='date'>"+array['time']+"</div>"; 
						str += "<div class='author'>"+array['name']+"</div>"; 
						str += "</div><div class=\"content\">"+array['name']+"</div></div>"; 
          }); 
						$("#container").append(str);
            load = true;  //当该次请求处理完成后，改变load值为true
					i++;   //+1,此时页面滚动会再次触发加载
					
				}else{ 
          load = false;
					$(".nodata").show().html("别滚动了，已经到底了。。。"); 
					return false; 
				} 
			}); 
		} 
	});
	 
}); 
  
</script>

php 

<?php
	function get_data(){
		$page = $_GET['page'] ? $_GET['page'] : 1;
		$page_size = 10;
		$data = array();
		for($i=0;$i<100;$i++){
			$data[] = array('id' => $i,'name'=>'test'.$i,'time'=>@date('Y-m-d H:i:s',time()));
		}
		$res = array_slice($data,($page-1)*$page_size,$page_size);
		$return = empty($res) ? null : $res;
		echo json_encode($return); 
	}
	get_data();

?>


Zoe_Wang_ing
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中如何进行滚动加载与无限滚动
stormjun的博客
10-03 3707
Vue.js提供了强大的工具和技术，使滚动加载和无限滚动的实现变得相对简单。通过示例代码和本文提供的指南，您可以轻松入门并在Vue项目中实现这一令人印象深刻的用户体验功能。希望这篇文章对您有所帮助，如果您有任何问题，请随时向我们提问。
实现滚动加载
qq_46177396的博客
03-02 257
滚动顶部+页面高度 >= 滚动高度 $(window).scroll(function() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; var clientHeight = document.docu
无限滚动分页加载与下拉刷新技术探析：原理深度解读与实战应用详述
最新发布
JINGWHALE
04-21 1286
本文详述了无限滚动分页加载与下拉刷新技术的原理，并以实战示例实际应用。下拉分页加载（也称为无限滚动、滚动加载、滚动分页）是一种常见的Web和移动端应用界面设计模式，用于在用户滚动到底部时自动加载下一页内容，而无需点击传统的分页按钮。这种设计旨在提供更加流畅、连续的浏览体验，减少用户交互步骤，尤其适合内容丰富的列表或瀑布流布局。
Jq页面滚动加载
我的博客
12-03 401
Jq页面滚动加载jq共用部分几乎不用修改开始加载数组 jq共用部分几乎不用修改 <script> //options.load:方法，加载的过程 //options.marginBottom:数值，默为0，触发加载的内部块与外部块底部的距离 //options.stop:方法，停止滚动加载的条件，默认返回false，一直加载 ( function ( $ ) ...
【前端性能】高性能滚动 scroll 及页面渲染优化
weixin_34402408的博客
05-17 505
最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。 本文主要想谈谈页面优化之滚动优化。 主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多基础，可以对照上面的知识点，选择性跳到相应地方阅读。      滚动优化的由来 滚动优化其实也不仅仅指滚动（sc...
vant中 list组件使用，分页及伪分页做法
luoxiaonuan_hi的博客
08-19 2741
这次实现的思路和上面的就不一样了，这次是在页面滚动到底部时，往空数组中添加数据，每次滚动到底部，会巧妙的运用数组的splice方法，从数组中截取数据，这个方法也有删除的意思，就是把截取的数据从数组中删除掉，splice方法返回删除的数据，所以当截取完所有数据，就可以判断是否还有数据，没有数据就完成了。// 在后台没有提供分页的基础上，要想长列表实现瀑布流滚动，当列表即将滚动到底部时，会触发事件并加载更多列表项。依旧是先监听页面的滚动事件。
jquerymobile滚动加载内容
08-13
本篇将深入探讨如何利用jQuery Mobile和Ajax实现滚动加载内容这一功能，这对于创建无限滚动的网页尤其重要。 一、jQuery Mobile 概述 jQuery Mobile是一个基于jQuery库的轻量级框架，它为移动设备提供了一套统一的...
页面内容滚动加载
01-23
页面内容滚动加载是一种常见的网页优化技术，也被称为“无限滚动”或“滚动侦测加载”。这种技术允许网页在用户滚动到页面底部时自动加载更多内容，而不是一次性加载所有内容，从而提高了网页的加载速度和用户体验。...
jquery mobile 滚动加载内容
04-21
当我们谈论“jQuery Mobile 滚动加载内容”时，我们实际上是在讨论一种动态加载技术，即在用户滚动页面到接近底部时，通过 AJAX（异步 JavaScript 和 XML）技术从服务器获取并插入更多内容，以实现无尽滚动的效果。...
jQuery实现页面滚动时动态加载内容的方法
10-24
主要介绍了jQuery实现页面滚动时动态加载内容的方法,实例分析了jQuery实现动态加载页面的技巧,非常具有实用价值,需要的朋友可以参考下
vue 使用鼠标滚动加载数据的例子
10-16
在Vue.js应用中，实现鼠标滚动加载数据是一种常见的优化用户体验的方法，特别是在处理大量数据列表时。这种方法被称为“无限滚动”或“滚动加载”。通过监听滚动事件，当用户接近页面底部时，可以动态加载更多数据，...
页面滚动自动加载数据脚本
weixin_30607659的博客
10-15 265
<!DOCTYPE=html> <html> <head> <scriptsrc="js/jquery.js"type="text/javascript"></script> <scripttype="text/javascript"> $(document).re...
整个页面滚动显示不同的内容
freejs
01-06 180
整个页面滚动显示不同的内容  本例用到的js和css请到演示页面查看 演示     JavaScript Code &lt;script&gt;     $(document).ready(function(){        $(".main").onepage_scroll({          sectionContainer: "section",  ...
滚动加载
weixin_41700532的博客
03-21 644
$("#list").on('scroll',function(){ var scrollHeight = this.scrollHeight; var scrollTop = $(this).scrollTop(); var clientHeight = this.clientHeight; if(scrollTop == 0){ console.log('触顶')...
滚动加载内容
u011393161的博客
11-24 286
场景 大概的场景是一个列表，要加载很多的内容，比如一个ul 里面有几万个li，li里面还有很复杂的结构，那么要怎么展示这些li呢。 有些已知条件，总的li个数是要知道的，视图区的大小是要知道的，li的高度是要知道的，其实是要知道ul到底是多少高度，因为要在滚动的时候保持这个高度不变，然后在视图区里替换这些li就好了 一种方案 一种方案是这样的，首先分组，按个数分，比如50个一组，分完以...
监听页面滚动实现加载更多功能
Justicky
01-30 1953
1、功能描述： 当页面内容超过一屏，没有分页功能，且页面滚动到底部时，希望自动加载更多数据。这时候就需要监听页面是否滚动到底部，并在滚动到底部时，执行回调函数。 2、代码实现： /** * 页面滚动到底部触发监听,执行回调 * @param callBack */ export function scrollToBottom (callBack) { window.onscrol...
页面滚动动态加载数据,页面下拉自动加载内容
qq_15804925的博客
10-08 5883
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多  有手机的相信都见过这样的效果：进入qq空间，向下拉动空间，到底部时，会动态加载剩余的说说或者是日志  今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出，
页面滑动加载------尽快更新实例
鱼儿眼中的海
11-30 578
1.第二个可以用来手机等触摸屏的上滑加载页面： $(document).height() //是获取整个页面的高度 $(window).height() //是获取当前 也就是你浏览器所能看到的页面的那部分的高度 这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的 根据英文应该也能理解吧
python 抓取滚动加载内容的页面
07-12
你可以使用 Selenium 库来抓取滚动加载内容的页面。以下是一个示例代码： ```python from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值