前端懒加载

博主： dafenqi
发布时间：2023 年 11 月 21 日
128 次浏览
暂无评论
3841字数
分类：前端

#  [前端懒加载](https://zhuanlan.zhihu.com/p/547700104) 
一、什么是懒加载？什么预加载？
---------------
### 概念：
 **懒加载** 也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。 有的网站图片很多，而如果一上来就加载所有的图片，会导致网页加载很慢; 图片懒加载：等图片正式进入到可视区中时，才加载对应的图片，否则不请求图片

**预加载** 指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。通过预加载能够减少用户的等待时间，提高用户的体验。我了解的预加载的最常用的方式是使用 js 中的 image 对象，通过为 image 对象来设置 scr 属性，来实现图片的预加载。

[懒加载和预加载的区别](https://blog.csdn.net/weixin_55076626/article/details/124248525) 
### 区别：
两者的行为是相反的，预加载是提前加载，懒加载是迟缓甚至不加载。

懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

### 意义：
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

预加载：预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

### 网站正常加载和预加载
预加载则是指在用户访问网站之前，网站会提前加载一些可能会用到的文件，以提高用户体验和页面加载速度。这些文件可能是网站的核心资源，或者是用户可能会访问的页面的文件，例如首页的图片、CSS 文件等。预加载可以通过一些技术手段来实现，比如使用预加载标签 <link rel="preload"> 预加载资源。

网站正常加载是按需加载，而预加载则是提前加载可能会用到的文件，以提高用户体验。

二、图片懒加载的基本实现
------------

图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。根据这个原理，我们使用HTML5的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。

> 注意：data-xxx中的xxx可以自定义，这里我们使用data-src来定义。

懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。所以当图片出现在可视区域时，获取图片的真实地址并赋值给图片即可。

```html
<div class="container">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
</div>
<script>
var imgs = document.querySelectorAll('img');
function lozyLoad(){
		var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		var winHeight= window.innerHeight;
		for(var i=0;i < imgs.length;i++){
			if(imgs[i].offsetTop < scrollTop + winHeight ){
				imgs[i].src = imgs[i].getAttribute('data-src');
			}
		}
	}
  window.onscroll = lozyLoad();
</script>

```

三、Intersection Observer实现图片懒加载
------------------------------

Intersection Observer是HTML5新增的API，可以用来实现图片懒加载。MDN中对Intersection Observer的解释

> `IntersectionObserver`接口 (从属于[Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗([viewport](https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport))交叉状态的方法。祖先元素与视窗([viewport](https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport))被称为根(root)

> 当一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

这里封装一个组件并且自定义一个v-lazy属性，然后替换到src上，实现懒加载。

```js
import { useIntersectionObserver } from "@vueuse/core";
import defaultImg from '@/assets/images/200.png'
import { App } from 'vue';

export default {
    install(app: App) {
        // 全局指令
        app.directive('lazy', {
            // mounted 是 v3 中自定义指令的生命周期，他会被自动调用
            // 它表示的含义和组件的mounted是一样的
            // el是 dom 元素， binding
            mounted(el, binding) {
                el.src = defaultImg
                console.log('lazy', el, binding.value);

//实时鉴定el是否可见， 如果可见 给它的src设置binding.value
                const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
                    if (isIntersecting) {
                        el.src = binding.value

stop()
                        el.onerror = function () {
                            el.src = defaultImg
                        }
                    }
                })

}
        })
    }
}
```

```html
 <img  v-lazy="item.picture"   alt=""/>
```

四. 延迟加载视频
---------

图片和视频这类静态资源资源占比都最大。与图片一样，视频同样可以延迟加载，来达到优化性能的目的。正常情况下加载视频，使用的是 video 标签，那么对于一些需要由用户自己播放的视频，最好指定video标签的preload属性为none，这样浏览器就不会预加载任何视频数据。为了占用空间，使用poster属性为video占位。如下：

```html
<video controls preload="none" poster="replace.jpg">
  <source src="main.webm" type="video/webm">
  <source src="main.mp4" type="video/mp4">
</video>
```

五. 使用第三方延迟加载库
-------------

除了上面介绍的一些延迟加载方法之外，还可以借助一些已经封装好的第三方库，下面是一些成熟的第三方库：  
lozad.js 是超轻量级且只使用 Intersection Observer 的库， 因此它的性能极佳，但如果要在旧版本浏览器上使用，则需要配置polyfill。  
lazysizes 是功能全面的延迟加载库，其使用的模式与本文所示的代码示例非常相似，会自动与元素上的lazyload 类绑定，然后在data-src 和/或 data-srcset 属性中指定图像网址，该库还可以通过许多插件进行扩展，执行延迟各种资源等操作。  
如果使用React，可以使用 react-lazyload来进行图片懒加载操作，这个库是React图片懒加载的主流解决方案。

最后修改：2023 年 11 月 21 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

zodhzrusdp
《遥遥乡愁》剧情片高清在线免费观看：https://www.j...
jprfffedhg
你的才华让人瞩目，期待你的更多文章。 https://w...
pkrqcpalxw
你的文章让我感受到了无尽的欢乐，谢谢分享。 http:/...
urjitfqbzy
你的文章让我感受到了生活的美好，谢谢！ https://...
bfgsfrpbas
你的文章让我心情愉悦，每天都要来看一看。 https:/...

前端懒加载

dafenqi • 2023 年 11 月 21 日

懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

### 意义：
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

预加载：预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

网站正常加载是按需加载，而预加载则是提前加载可能会用到的文件，以提高用户体验。

二、图片懒加载的基本实现
------------

> 注意：data-xxx中的xxx可以自定义，这里我们使用data-src来定义。

```

三、Intersection Observer实现图片懒加载
------------------------------

Intersection Observer是HTML5新增的API，可以用来实现图片懒加载。MDN中对Intersection Observer的解释

这里封装一个组件并且自定义一个v-lazy属性，然后替换到src上，实现懒加载。

```js
import { useIntersectionObserver } from "@vueuse/core";
import defaultImg from '@/assets/images/200.png'
import { App } from 'vue';

stop()
                        el.onerror = function () {
                            el.src = defaultImg
                        }
                    }
                })

}
        })
    }
}
```

```html
 <img  v-lazy="item.picture"   alt=""/>
```

四. 延迟加载视频
---------

```html
<video controls preload="none" poster="replace.jpg">
  <source src="main.webm" type="video/webm">
  <source src="main.mp4" type="video/mp4">
</video>
```

五. 使用第三方延迟加载库
-------------

前端懒加载

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

PHP 数据类型

当你在浏览器扣下域名时。。。

PHP switch 替代品 match

变量在内存中的表现形式

简易发邮件

用 Redis 实现一个轻量级的搜索引擎

如何实现RESTful Web API的身份验证

PHP程序员如何理解IoC/DI

MySQL数据库SQLSTATE[22007]: Invalid datetime format 日期类型不能为空值的解决办法

原生php递归删除文件+文件夹

前端懒加载

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

前端懒加载

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款