网页内容延迟加载实现方式

最新推荐文章于 2022-06-05 14:04:05 发布
最新推荐文章于 2022-06-05 14:04:05 发布
阅读量2.6k 收藏
点赞数
分类专栏： JS 文章标签： function xhtml javascript scroll html 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ltx851201/article/details/7057393
版权
  
在项目当中，以前是用分页效果，由于该次分页效果去掉了，但是需要显示的内容可能又超过了一屏的显示，故用JS整了个延迟加载的效果，达到了之前分页同样的效果，同时用户体验也比之前的要强多了。下面是整个HTML代码：
<!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=utf-8" />
<title>文章内容随着页面的滚动条而滚动动态增加显示</title>
<script type="text/javascript" src="js/lib/jquery-1.4.4.js"></script>
</head> 
<body>
	<script language="javascript" type="text/javascript">
		//文章内容随着页面的滚动条而滚动动态增加显示
		(function(window) {
			var getMsg = true; 
			var _target = window;
			var t = 0;
			function bindEvent(t, e, f) {
				if (t.attachEvent) {
					t.attachEvent('on' + e, f);
				} else if (t.addEventListener) {
					t.addEventListener(e, f, false);
				}
			}
			$(document).ready(function() {
				//事件监听
				bindEvent(_target, 'scroll', function() {
					t++;
					var top = $(_target.document).scrollTop();
					var scrollheight = $(_target.document).scrollTop() +  _target.document.documentElement.clientHeight;
				    if (top < scrollheight && t < 10) {
				    	//setTimeout('',500);
						var st = this.scrollTop;  
						if (getMsg) {
							getMsg = false;  
							// 从服务器返回后面的列表内容  
							$.get("divcss/demo2/scripts/load.html", function(data) {
								// 将返回结果附加到列表  
								$("#lazyload").append(data);  
								$("#lazyload").scroll(st);  
								getMsg = true;  
							});
						}
					}
				});
			});
		})(window);
	</script>
	<div>
		<ul name="lazyload" id="lazyload">
			<li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		    <li>age:185<span>2011-12-10 13:15:11</span></li>
		</ul>
	</div>
	
</body>
</html>
注释：好像在IE下面如果滚动过快，这个效果有时候会有问题，正在考虑优化这个方案。有高手在的，也可以指点一二。

ltx851201
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
页面延迟加载
08-07
页面延迟加载
网页内容延迟加载LazyLoad
06-02
实现网页内容、图片延迟加载，没有浏览到的不显示，只有浏览器看到的才显示。
JavaScript延迟加载 改变JS的位置加快网页加载速度
dahuzi的专栏
07-09 1159
JavaScript延迟加载 改变JS的位置加快网页加载速度     当一个网站有很多js代码要加载，js代码放置的位置在一定程度上将会影像网页的加载速度，为了让我们的网页加载速度更快，本文总结了一下几个注意点：   1、延迟加载js代码   setTimeout(“document.getElementById(‘my').src=
网页性能优化:延迟加载资源
Vincent Blog
08-12 922
延迟加载 延迟加载是一种在加载页面时，延迟加载非关键资源的一种方法，而这些非关键资源则在需要时才进行加载，就图像而言，‘非关键’通常指的是‘屏幕外’。 延迟加载图像和视频时，可以减少初始页面加载时间、初始页面负载以及系统资源使用量，所有这一切都会对性能产生积极影响。 通常来说加载网页时，浏览器会请求所有的图像，而不管它们实在视窗还是在页面的更深处并且不可见。延迟加载允许我们加载可见的图像，并且在用户滚动时按需异步加载其他的图片。这减少了负载请求的数据，并可以大大加快该过程。 延迟加载图像 HTML中的延
延时加载
唐立彤的博客
12-07 353
延时加载，在大量数据加载的时候，会影响整个页面加载的速度，为了提高速度，使用延时加载是非常好的选择，下面将介绍4中延时加载内容的方式。 本文中重点难点： 1.offsetLeft：距离父级容器的left值 2.offsetTop：距离父级容器的top值 以上两点注意，要看父级是否存在定位，如果存在定位则相对父级计算，如果不存在定位，则继续向上找，直到找到具有定位的容器做相对位置的计算。 3.cl
html5延迟加载效果,网站性能延迟加载图像的五种技巧(小结)
weixin_34803738的博客
06-05 790
由于图片是web上最流行的内容类型之一，因此网站的页面加载时间很容易成为一个问题。即使经过适当的优化，图像也会有相当大的重量。这可能会对访问者在访问网站内容之前等待的时间产生负面影响。很有可能，它们会失去耐心，转向其他地方，除非你能想出一个不影响速度感知的图像加载解决方案。在本文中，您将学习有关延迟加载图像的五种方法，您可以将这些方法添加到web优化工具包中，以改进站点上的用户体验。什么是延迟加载...
JavaScript 封装的延迟加载技术示例 JavaScript 封装的延迟加载技术示例，可以用于加载容器、加载DIV以及加载图片等，可有效降低浏览器损耗，有兴趣可以尝试一番。
03-08
JavaScript 封装的延迟加载技术示例 JavaScript 封装的延迟加载技术示例，可以用于加载容器、加载DIV以及加载图片等，可有效降低浏览器损耗，有兴趣可以尝试一番。
div盒子内容的懒加载
04-09
通过查询数据库里面的数据，每一组数据放在一个div盒子里，拖动滚动条实现惰性加载，也称为懒加载。简单的事例，易学易懂。
JS为什么要延迟加载，有哪些方法可以实现延迟加载?
王春燕的博客
06-05 3450
对于js的优化（关于js的延迟加载）的好处是有助于提高页面加载速度，js延迟加载就是等页面加载完成之后在加载js文件. HTML元素是按其在页面中出现的次序调用的，如果用javascript来管理页面上的元素（使用文档对象模型dom），并且js加载于欲操作的HTML元素之前，则代码将出错。也就是说，我们写了js语句来获取DOM对象，但由于DOM结构还没有加载完成，因此获取到的是空对象。...
图片延迟加载
web9543的专栏
01-11 412
$(function(){ var $winH = $(window).height();//获取窗口高度 var $img = $("#show img"); var $imgH = parseInt($img.height()/2);//图片到一半的时候显示 var $srcDef = "a.gif"; runing();//页面刚载入时判断要显示的图片 //***********
JS延迟加载的几种方式
热门推荐
meijory的博客
07-30 9万+
JS延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件。一般有以下几种方式：1. defer 属性HTML 4.01 为 <script>标签定义了 defer属性。 用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。在<script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。<!DOCTYPE html>
JS让内容延迟显示的代码
美奇软件开发工作室
03-11 3950
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
什么！你喜欢延迟加载动画css？
qq_39739326的博客
06-05 258
拿走吧 整理好的css延迟动画，让你的页面更有趣 在这里插入代码片 .animate0 { -webkit-animation-duration: .8s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-duration: .8s; -moz-animation-delay: 0s; -moz-a
数据量大时,页面延时加载方法.
kira1999的专栏
08-13 6354
1:在JSP 页面Form表单 搜索 控件区 中 添加一个隐藏域 2:在Action中获取到该参数对象。 String isQuery       =  request.getParameter("isQuery"); if(isQuery == null) isQuery = ""; 然后将该对象传到业务处理类Bo中。 boRequest.setAttribute("isQuer
js的延迟加载方式
zm_miner的博客
09-02 559
首先我们要考虑为什么要提出js的延迟加载?? 有助于提高页面加载速度, js延迟加载就是等页面加载完成以后再加载js文件 我们都知道 dom元素是从上到下渲染的, 如果js来管理页面上的元素, 并且js加载操作想在HTML之前, 代码就会报错. eg: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
预加载和延迟加载（页面刷新为什么要用settimeout()）
lml_little的博客
12-13 2141
页面加载方式有2种，预加载和延迟加载。 1、预加载： 意思是提前加载,在前端技术中用的比较多，如：window.onload，document.ready在文档加载完成后才能够去执行。这 样子做的有什么厉害之处：牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。 2、延迟加载 与上面的预加载相反，延迟加载的使用一般用于这3种情况：
优化网页性能：JavaScript实现图片延时加载
图片延时加载是一种优化网页性能的技术，尤其适用于长页面，可以显著提升用户体验，减少初始页面加载时间，使用户更快看到内容。该技术的工作原理是，当页面首次加载时，只有在用户滚动到可视区域内的图片才会立即...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值