原生js实现懒加载并节流

更新日期: 2019-02-16阅读: 2.1k标签: 性能

像淘宝网站等,页面中有着大量图片,一次性全部加载这些图片会使浏览器发送大量请求和造成浪费。采用懒加载技术,即用户浏览到哪儿,就加载该处的图片。这样节省网络资源、提升用户体验、减少服务器压力。


方法1:使用scrollTop/innerHeight/offsetTop

基本知识点:

window.innerHeight:浏览器可视区域高度
document.body.scrollTop || document.documentElement.scrollTop:浏览器滚动条滚过高度
img.offsetTop:元素距文档顶部的高度 

这里有张图可以非常清晰的理解上述概念:



加载条件:

img.offsetTop < window.innerHeight + document.body.scrollTop;

代码如下:

<script type="text/javascript">
	var imgs = document.querySelectorAll('img');
	window.onscroll = function(){
		var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		var winTop = window.innerHeight;
		for(var i=0;i < imgs.length;i++){
			if(imgs[i].offsetTop < scrollTop + winTop ){
				imgs[i].src = imgs[i].getAttribute('data-src');
			}
		}
	}
</script>

函数节流:

<script type="text/javascript">
	var imgs = document.querySelectorAll('img');
	var lazyload = function(){
		var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		var winTop = window.innerHeight;
		for(var i=0;i < imgs.length;i++){
			if(imgs[i].offsetTop < scrollTop + winTop ){
				imgs[i].src = imgs[i].getAttribute('data-src');
			}
		}
	}
	function throttle(method,delay){
		var timer = null;
		return function(){
			var context = this, args=arguments;
			clearTimeout(timer);
			timer=setTimeout(function(){
				method.apply(context,args);
			},delay);
		}
	}
	window.onscroll = throttle(lazyload,200);
</script>



方法2:使用IntersectionObserver方法

基础知识

var io = new IntersectionObserver(callback, option);
 
//开始观察
io.observe(document.getElementById('example'));
 
//停止观察
io.unobserve(element);
 
// 关闭观察器
io.disconnect();

上面代码中,构造函数IntersectionObserver接收两个参数:callback是可见性变化时的回调函数,option是配置对象(该参数可选)。 这个构造函数的返回值是一个观察器实例。构造函数的返回值是一个观察器实例,实例的observe方法可以指定观察哪个dom节点。

observe的参数是一个DOM节点对象。如果要观察多个节点,就要多次调用这个方法。 callback函数的参数(entries)是一个数组,每个成员都是一个IntersectionObserverEntry对象。举例来说,如果同时有两个被观察的对象的可见性发生变化,entries数组就会有两个成员。

intersectionRatio:目标元素的可见比例,完全可见时为1,完全不可见时小于等于0。 

 代码如下:

<script type="text/javascript">
	//获取观察器实例  changes是被观察的对象数组
	var observer = new IntersectionObserver(function(changes){  
		console.log(changes);
		changes.forEach(function(index,item){
			if(item.intersectionRatio > 0 && item.intersectionRatio < 1)
				//target:被观察的目标元素,是一个 DOM 节点对象
				item.target.src = item.target.dataset.src;
		});
	});
	function addObserver(){
		var listItems = document.querySelectorAll('.img-item');
		listItems.forEach(function(item){
			//实例的observe方法可以指定观察哪个DOM节点
			//开始观察  observe的参数是一个 DOM 节点对象
			observer.observe(item);
		});
	}
	addObserver();
</script>


完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>LozyLoad</title>
	<style>
		.images{
			display: flex;
			flex-direction: column;
			text-align: center;
			width: 500px;
		}
		.img-item{
			height:400px;
			width: 400px;
			margin: 20px;
		}

	</style>
</head>
<body>
	<div class="images">
		<img class="img-item" alt="loading" data-src="./img/img1.png">
		<img class="img-item" alt="loading" data-src="./img/img2.png">
		<img class="img-item" alt="loading" data-src="./img/img3.png">
		<img class="img-item" alt="loading" data-src="./img/img4.png">
		<img class="img-item" alt="loading" data-src="./img/img5.png">
	</div>
	<!--
	<script type="text/javascript">
		//获取观察器实例  changes是被观察的对象数组
		var observer = new IntersectionObserver(function(changes){  
			console.log(changes);
			changes.forEach(function(index,item){
				if(item.intersectionRatio > 0 && item.intersectionRatio < 1)
					//target:被观察的目标元素,是一个 DOM 节点对象
					item.target.src = item.target.dataset.src;
			});
		});
		function addObserver(){
			var listItems = document.querySelectorAll('.img-item');
			listItems.forEach(function(item){
				//实例的observe方法可以指定观察哪个DOM节点
				//开始观察  observe的参数是一个 DOM 节点对象
				observer.observe(item);
			});
		}
		addObserver();
	</script>
	-->
	<script type="text/javascript">
		var imgs = document.querySelectorAll('img');
		var lazyload = function(){
			var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
			var winTop = window.innerHeight;
			for(var i=0;i < imgs.length;i++){
				if(imgs[i].offsetTop < scrollTop + winTop ){
					imgs[i].src = imgs[i].getAttribute('data-src');
				}
			}
		}
		function throttle(method,delay){
			var timer = null;
			return function(){
				var context = this, args=arguments;
				clearTimeout(timer);
				timer=setTimeout(function(){
					method.apply(context,args);
				},delay);
			}
		}
		window.onscroll = throttle(lazyload,200);
	</script>
</body>
</html>



链接: https://www.fly63.com/article/detial/2035

提高js加载速度,实现js无阻塞加载方式,高性能的加载执行JavaScript

为解决JS加载速度慢,采用js的延时加载,和动态加载。由于js的堵塞特性,当浏览器在加载javascript代码时,不能同时做其他任何事情,如果javascript执行时间越久,浏览器等待响应的时间就越久。

如何提高CSS性能?CSS优化、提高性能提升总汇

如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要表现为: 加载性能 (主要是从减少文件体积,减少阻塞加载,提高并发方面入手),选择器性能,渲染性能,可维护性。

前端性能优化_css加载会造成哪些阻塞现象?

css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染,会阻塞link后面js语句的执行。这是由于浏览器为了防止html页面的重复渲染而降低性能,所以浏览器只会在加载的时候去解析dom树,然后等在css加载完成之后才进行dom的渲染以及执行后面的js语句。

2018 前端性能检查表

性能十分重要。然而,我们真的知道性能瓶颈具体在哪儿吗?是执行复杂的 JavaScript,下载缓慢的 Web 字体,巨大的图片,还是卡顿的渲染?研究摇树(Tree Shaking),作用域提升(Scope Hoisting)

高性能Javascript总结

Js高性能总结:加载和运行、数据访问、DOM编程、算法和流程控制、响应接口、Ajax 异步JavaScript和XML、编程实践...

优化网站性能规则_前端性能优化策略【网络加载、页面渲染】

前端网站性能优化规则:网络加载类、页面渲染类。包括:减少 HTTP 资源请求次数、减小 HTTP 请求大小、避免页面中空的 href 和 src、合理设置 Etag 和 Last-Modified、使用可缓存的 AJAX、减少 DOM 元素数量和深度等

前端性能的本质是什么?

性能一直以来是前端开发中非常重要的话题。随着前端能做的事情越来越多,浏览器能力被无限放大和利用:从 web 游戏到复杂单页面应用,从 NodeJS 服务到 web VR/AR 和数据可视化,前端工程师总是在突破极限

BigPipe_高性能流水线页面技术

BigPipe是一个重新设计的基础动态网页服务体系。大体思路是,分解网页成叫做Pagelets的小块,然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。这是类似于大多数现代微处理器的流水线执行过程:多重指令管线通过不同的处理器执行单元,以达到性能的最佳。

用CSS开启硬件加速来提高网站性能

你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗?现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。

php中一些提高性能的技巧

【概述】* 把类定义成static* echo比print快* 用全等号代替双等,减少类型转换* echo用逗号连接字符串效率高* require比require_once()快,并且尽量不要使用相对路径

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!