Jquery懒加载

Veröffentlicht am
前言

在我们浏览网页的时候，有没有发现有的时候当我们翻动鼠标的时候，页面才会给你显示出你要的内容，当我们不将鼠标下拉的时候，这些内容就不会显示出来。

就好比我们吃饭的时候，当我们吃完一份菜的时候，发现不是很饱，就再要一份，当我们吃饱了的时候，就不会再继续上菜了。

如果去吃饭的话，餐厅把所有的才做一遍，然后给你，一方面当所有菜做完了，你也饿的差不多晕了，另一方面，所有菜做下来既浪费金钱，吃不完又浪费粮食。

懒加载就是这样，他会先给你显示一部分页面的内容，当你想要继续向下浏览的时候，他再继续给你显示一部分的内容，知道整个页面全部浏览完成的时候，你才能看到这个页面的所有内容。这个过程就叫做，页面的懒加载。

这样做的好处就是节省浏览器加载所需要的时间，如果浏览器全部加载的话，就会需要大量的时间进行渲染，而使用懒加载，就可以节省时间，优化浏览器的性能。

懒加载的原理

懒加载的原理就是将一部分的内容浏览器先不进行加载，当用户需要的时候，浏览器再进行加载。

如何实现懒加载

如果我们需要懒加载的时候，我们首先要确定几个问题；

  • 如何加载图片
  • 浏览器什么时候加载图片
如何加载图片

![](xxxx.jpg)

当完成上述代码的时候，浏览器就会对这个图片进行解析，加载图片
如果我们不想要浏览器加载这个图片的话，可以将src中的内容清空，只保留了img的标签，但不会对图片进行加载

![]( )

上述的代码表示，保留了img标签，但是不加载图片，如果我们在某个时间需要这个img标签加载图片的话，就可以将自定义的标签属性中的内容放入img标签的src中。

1
2
3
4
5
6
7
function showImg($imgs){
		$imgs.each(function(){
		var imgUrl=$(this).attr("data-src");
		$(this).attr("src",imgUrl)
		})
		
	}

这样图片就会加载出来了。

#####浏览器什么时候加载图片
确定浏览器什么时候加载图片，我们就必须要确认几个问题

  • 确定节点在浏览器中的位置
    只有确定了节点在浏览器的位置，我们才能能确定浏览器是否要加载，如何确定一个节点在浏览器上的位置呢？

懒加载.jpg

图片懒加载2.png
windowHeight表示浏览器的高度；
scrollTop表示页面的滚动的距离；
offsetTop表示节点距离最顶端的距离；
nodeHeight表示节点自身的高度

所以如何确定节点是否显示在浏览器上必须同时满足两个条件：

1. windowHeight(浏览器的高度)+scrollTop(页面的滚动的距离)>offsetTop(节点距离最顶端的距离)
2. offsetTop(节点距离最顶端的距离)+nodeHeight(节点自身的高度)>scrollTop(页面的滚动的距离)

将它转化为代码表示为：

1
2
3
4
5
6
7
8
9
10
11
12
function isShow($node){
		var windowHeight=$(window).height(),
			scrollTop=$(window).scrollTop(),
			offsetTop=$node.offset().top,
			nodeHeight=$node.height();
		if(windowHeight+scrollTop>offsetTop && scrollTop<offsetTop+nodeHeight){
			return true
		}else{
			return false
		}
	}

  • 确定加载图片时间

这个问题和第一个问题是紧密相连的，其实当确定节点只要显示在浏览器上，就可以确定加载图片的时间，代码展示为

1
2
3
4
5
6
7
$(window).on("scroll",function(){
		$(".list img").each(function(){
			if(isShow($(this))){
				showImg($(this))
			}
		})
	})

这样就完成了图片的懒加载
图片懒加载

这个demo在每次进行滚动的时候都会监听所有的图片，这样导致大量无意义的工作，所以我们要优化一下，我们可以在每一个加载完成的图片上添加一个class名，当滚动的时候会跳过这些带有class名的图片，这样就大大简化了浏览器的工作量

这个就需要自己动手完成了

当然我们可以扩展成为一个新闻的懒加载：

新闻懒加载
新闻懒加载代码

结语：

懒加载说简单也仅仅是简单的几行代码，可是里面所牵扯的数字问题对于我来说，还是有一定的复杂度在里面，努力的学习就是进步，为自己加油！！！