如何深入理解并实现JavaScript的懒加载与预加载技术？

本文共计2071个文字，预计阅读时间需要9分钟。

目录

1.懒加载

1.1 什么是懒加载 1.2 为什么使用懒加载 1.3 懒加载的优点 1.4 懒加载的原理 1.5 懒加载的实现步骤 1.6 懒加载的实现方式

2.预加载

2.1 什么是预加载 2.2 为什么使用预加载

目录

• 1、懒加载
• 1.1、什么是懒加载
• 1.2、为什么要使用懒加载
• 1.3、懒加载的优点
• 1.4、懒加载的原理
• 1.5、懒加载的实现步骤
• 1.6、懒加载的实现方式
• 2、预加载
• 2.1、什么是预加载
• 2.2、为什么要使用预加载
• 2.3、实现预加载的方法

1、懒加载

1.1、什么是懒加载

懒加载也可以叫做延迟加载，当访问一个页面的时候，先把img元素伙食其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样只需要请求一次，俗称占位图）；

只有当图片出现在浏览器的可视区域内时，才这只图片真正的路径，让图片显示出来，这就是图片懒加载。