JavaScript实现懒加载

最新推荐文章于 2023-10-12 19:07:31 发布

u012888365

最新推荐文章于 2023-10-12 19:07:31 发布

阅读量3.6k

点赞数 1

分类专栏： Web 文章标签： JavaScript懒加载 JS图片懒加载 JS可视区域懒加载

本文链接：https://blog.csdn.net/gzu_imis/article/details/38361707

版权

Web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

常用的懒加载是图片懒加载，jquery提供了很好的实现

本例要讲的是对某一类进入【可视区域】的元素，进行懒加载

这里的懒加载可以是加载一张图片，也可是ajax异步加载内容

比如：页面如果非常丰富并且很长，需要用户翻页浏览的情况下

如果要对若干板块进行懒加载，可以按照本例的思路简单实现一个

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	
	//dom加载完之后获取各个容器距离容器顶部的高度
	var asyncOffsets = [];
	$(function(){
		asyncOffsets = getOffset();
		
		// 页面加载完毕之后就主动触发一次scroll事件,因为页面顶部可能存在已经进入【可视区域】的元素
		$(window).trigger('scroll');
	});
	
	// 获取每个div元素的偏移量
	function getOffset(){
		var offsets = [];
		$("div[async=async]").each(function(){
			offsets.push($(this).offset().top);
		});
		return offsets;
	}
	
	// 监听窗口滚动事件
	$(window).scroll(function(){
		// 可视区域高度
		var see = $(this).height();
		// 当前文档整体高度
		var scroll = $(document).scrollTop();
		// 打印
		//console.info("可视区域高度：" + see + ";滚动条到顶部的高度：" + scroll);
		
		// 如果 (浏览器可视高度 + 当前滚动条高度 > 元素的offsetTop) 
		// 说明当前元素已经进入【可视区域】
		// 对当前进入可视区域的元素：触发一些事件,比如是img标签实现懒加载
		// 或者异步加载一些区域的内容
		
		// 遍历需要监听【是否已进入可视区域的元素】,据此来触发事件
		var current;
		for(var i=0;i<asyncOffsets.length;i++){
			if(see+scroll>asyncOffsets[i]){
				current = $("div[idx=" + (i+1) +"]");
				
				// 已经加载过的不再加载
				if("true"==current.attr("isloaded")){
					continue;
				}
				
				// 控制台打印调试信息
				console.info(current.html());
				
				// 触发异步事件加载内容
				loading(i+1);
				
				
				// 一旦被加载过，就不再加载
				current.attr("isloaded","true");
				
			}
		}
			
	});
	
	// idx 为当前进入可视区域的对象,本例中就是一个div标签
	// 可以在初始化整个页面时就为每个div初始化一些参数,这样div在进入可视区域时可以用到这些参数
	function loading(idx){
		$.ajax({
			type:'POST',
			url:'http://localhost/ServletJs/LoadServlet',
			data:{"idx":idx},
			dataType: 'html',
			async:true,
			success:function(msg){
				$("div[idx=" + idx +"]").html(msg);
			}
		});
	}
	
	
</script>
</head>
<body>
	<div idx="1" async="async" style="height:400px;width:800px;border:1px solid #CCC;">area 1</div>
	<div idx="2" async="async" style="height:400px;width:800px;border:1px solid #CCC;">area 2</div>
	<div idx="3" async="async" style="height:400px;width:800px;border:1px solid #CCC;">area 3</div>
	<div idx="4" async="async" style="height:400px;width:800px;border:1px solid #CCC;">area 4</div>
	<div idx="5" async="async" style="height:400px;width:800px;border:1px solid #CCC;">area 5</div>
	<div idx="6" async="async" style="height:400px;width:800px;border:1px solid #CCC;">area 6</div>
	<div idx="7" async="async" style="height:400px;width:400px;border:1px solid #CCC;float:left;">area 7</div>
	<div idx="8" async="async" style="height:400px;width:400px;border:1px solid #CCC;float:left;margin-left:20px;">area 8</div>
	<div idx="9" async="async" style="height:400px;width:800px;border:1px solid #CCC;clear:both;">area 9</div>
	<div idx="10" async="async" style="height:400px;width:800px;border:1px solid #CCC;">area 10</div>
</body>
</html>