当我们访问一个图片很多的网页时，加载速度慢往往是因为图片多造成的。主要介绍了前端必做的图片懒加载(三种方式)，有一定的参考价值，感兴趣的朋友可以参考一下。

目录

一、什么是懒加载：二。实现懒加载：2.1第一种方式：2.2第二种方式：2.3第三种方式(优秀):III。总结：

一.何为懒加载：

当我们访问一个图片多的网页时，加载速度慢往往是因为图片多，大量的img图片导致页面渲染受阻。当花了很大力气加载完所有图片和页面的时候，用户已经走了。另一方面，如果用户只看网页的前面部分就离开了，很多已经加载但因为在网页底部而没有呈现在视口区域的图片会大大增加服务器的压力，但用户不会看，浪费了性能。

为了解决以上问题，我们需要引入图片的懒加载。懒装其实很好理解，重点就是一个‘懒’字。当用户滚动对应的可视区域时，如果可视区域内有图片，则加载，而可视区域外未加载的图片不会先加载。如果用户将可视区域滚动到它们，它们将被再次加载，否则不会被加载。这将大大提高网页渲染的性能，减少不必要的浪费。

二.实现懒加载：

首先定义一个基本的HTML页面来模拟一些有大量图片的网页。比如我用8个img标签来模拟，同时定义一些基本的css样式。代码和初始效果如下：

html:

img src='img/1.jpg' alt='xxx' /

img src='img/2.jpg' alt='xxx' /

img src='img/3.jpg' alt='xxx' /

img src='img/4.jpg' alt='xxx' /

img src='img/5.jpg' alt='xxx' /

img src='img/6.jpg' alt='xxx' /

img src='img/7.jpg' alt='xxx' /

img src='img/8.jpg' alt='xxx' /

css:

* {

边距：0；

填充：0；

框大小：边框-框；

}

img {

宽度：500px

高度：300px

对象适合：封面；

边距：20px

}

正文{

显示器：flex

flex-wrap:缠绕；

对齐-内容：空间-均匀；

}

初期效果如下。您可以在右侧看到控制台，当我运行此页面时，所有八个图像都已加载并一起呈现：

下面是利用JavaScript实现懒加载的3种方式，原理都是判断图片是否出现在可视区后给图片赋值src属性。

2.1 第一种方式：

首先，修改每个img标签，并使用HTML提供的data- attribute来嵌入定制数据。我们将这个标签的原始图像地址存储在这个自定义数据中。同时，所有图片的src属性都是用同一个图片来表示的，一般可以是显示loading字样的图片。注意，如果多个img标签src引用同一个图像，它只会被加载一次，而不是多次，所以我将在下面为每个图像src定义相同的图像。

img data-src=' img/1 . jpg ' src=' img/0 . png ' alt=' XXX '/

img data-src=' img/2 . jpg ' src=' img/0 . png ' alt=' XXX '/

img data-src=' img/3 . jpg ' src=' img/0 . png ' alt=' XXX '/

img data-src=' img/4 . jpg ' src=' img/0 . png ' alt=' XXX '/

img data-src=' img/5 . jpg ' src=' img/0 . png ' alt=' XXX '/

img data-src=' img/6 . jpg ' src=' img/0 . png ' alt=' XXX '/

img data-src=' img/7 . jpg ' src=' img/0 . png ' alt=' XXX '/

img data-src=' img/8 . jpg ' src=' img/0 . png ' alt=' XXX '/

此时，页面效果如下：

接下来，当我们用JavaScript滚动滚动条时，如果图片出现在可视区域，那么加载图片。加载图像实际上是将img标签的src属性赋给原始地址，然后图像会被请求加载和渲染。

//获取所有img标签

var images=document . getelementsbytagname(' img ')；

window . addevent listener(' scroll '，(e)={

//滚动事件发生时调用遍历事件

遍历()；

});

函数遍历(){

//遍历每张图片

对于(让我的形象){

//确定当前图片是否在可视区域。

if(I . offsettop=window . inner height window . scrolly){

//获取自定义data-src属性的值

设true src=I . get attribute(' data-src ')；

//将值赋给图像的src属性

i.setAttribute('src '，true src)；

}

}

}

//如果没有滚动事件，应该先执行一次。

遍历()；

其中offsetTop是距元素顶部的距离；Window.innerHeight是当前窗口的高度；Window.scrollY是滚动距离；不难知道，当I . offsettop=window . innerheightwook . scroll时，图片在窗口的可见区域。

此时效果如下，观察右侧控制台，发现当滚动时图片才加载：

2.2 第二种方式：

其实第二种方法和第一种类似，只是计算图片是否在可视区域的方法不同，重复的部分省略了，如下：

window . addevent listener(' scroll '，(e)={

遍历()；

});

函数遍历(){

对于(让我的形象){

//计算方法与第一种不同。

if (i.getBoundingClientRect()。top window.innerHeight) {

设true src=I . get attribute(' data-src ')；

i.setAttribute('src '，true src)；

}

}

}

遍历()；

其中getBoundingClient()。top是元素相对于窗口的位置；Window.innerHeight是当前窗口的高度；当元素到窗口的位置小于当前窗口的高度时，它自然在窗口的可见区域中。

效果一样的：

2.3 第三种方式（优）：

实际上，以上两种方法基本上都实现了懒加载，但它们都有一个缺点，就是当发生滚动事件时，会发生大量的循环和判断操作来判断图片是否在可视区域内。这个自然不太好，所以是否有解决办法。这里介绍一个名为Intersection Observer的观察者接口，是浏览器原生提供的构造器。用它可以省去很多循环和判断。当然，它的兼容性可能不太好，要看情况。

什么是路口观察者？这个构造函数的作用是可以观察可见窗口和目标元素的相交区域。简单来说，当我们用它来观察我们的图片时，当图片在可见窗口中出现或消失时，它可以知道并执行一个特殊的回调函数。我们使用这个回调函数来实现我们的操作。这个概念很无聊，很难理解。请看下面的例子：

1.由于IntersectionObserver是浏览器本机提供的构造函数，因此首先创建一个实例：

const observer=new intersect observer(回调)；

它将有一个参数回调，这是一个回调函数。目标元素可见时触发一次，目标元素不可见时再次触发。

2.使用实例通过observer属性为每张图片绑定一个观察点：

对于(让我的形象){

观察者：观察者(一)；

}

3.从上面我们可以知道，每一张图片在可以看或者看不到的时候都会触发一个回调函数。同时，回调函数也有一个参数条目。我们可以运行回调函数来看看它是什么：

函数回调(条目){

console.log(条目)

}

可以看到每次图片可见或不可见时都会触发回调函数，输出参数条目的内容。实际上，entries是一个数组，它的数组元素是已经改变了状态并触发了事件的目标元素。有一个isIntersecting属性，当目标元素在视口中可见时为true，否则为false。我们可以使用这个属性，当它为真时，将触发这个事件的图像的src属性值设置为data-src，并开始加载。

函数回调(条目){

对于(条目的字母I){

如果(即交叉){

设img=i.target

设true src=img . get attribute(' data-src ')；

img.setAttribute('src '，true src)；

}

}

}

其中目标事件属性返回触发事件的元素。目前，当你向后滚动时，画面会一会儿可见，一会儿不可见。它是一个触发器回调函数，所以当一张图片被加载时，我们必须停止它的查看器。使用unobserve属性停止。

函数回调(条目){

对于(条目的字母I){

如果(即交叉){

设img=i.target

设true src=img . get attribute(' data-src ')；

img.setAttribute('src '，true src)；

//结束观察

观察者观察组织；

}

}

}

完整代码：

var images=document . getelementsbytagname(' img ')；

函数回调(条目){

对于(条目的字母I){

如果(即交叉){

设img=i.target

设true src=img . get attribute(' data-src ')；

img.setAttribute('src '，true src)；

观察者观察组织；

}

}

}

const observer=new intersect observer(回调)；

对于(让我的形象){

观察者：观察者(一)；

}

效果如下，实现懒加载：

三.总结：

以上都是关于图片的懒加载。一般来说，一些img量大的网页，如果在页面渲染阶段加载全部图片，会被屏蔽。为了解决图片懒加载的问题，用户滚动对应的可视区域，如果可视区域有图片，就会加载图片。核心是定义自定义属性数据-src来存储图像的真实访问地址。当图像出现在可视区域中时，data-src的值被分配给src属性，然后图像被加载。其中，不仅不能通过一些常用属性判断图片的位置，还引入了消耗IntersectionObserver接口较少的懒加载。

关于前端图片的懒加载(三种方式)这篇文章到此为止。要了解更多关于图像延迟加载的信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。