懒加载实例
前端必会的图片懒加载（三种方式）
前端必会的图⽚懒加载（三种⽅式）⽬录⼀.何为懒加载 ：⼆.实现懒加载 ：2.1 第⼀种⽅式：2.2 第⼆种⽅式：2.3 第三种⽅式（优）：三.总结：⼀.何为懒加载 ： 在我们访问⼀个图⽚展⽰⽐较多的⽹页时，加载速度慢很多时候正是因为图⽚多导致，⼤量的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：* {margin: 0;padding: 0;box-sizing: border-box;}img {width: 500px;height: 300px;object-fit: cover;margin: 20px;}body {display: flex;flex-wrap: wrap;justify-content: space-evenly;}初始效果如下，可以看到右边的控制台，8张图⽚在我⼀运⾏这个页⾯的时候就都⼀同被加载渲染了：下⾯是利⽤JavaScript实现懒加载的3种⽅式，原理都是判断图⽚是否出现在可视区后给图⽚赋值src属性。
前端开发中的懒加载实现教程
前端开发中的懒加载实现教程前端开发中，懒加载（Lazy Load）是一种优化技术，可以提高网站的性能和用户体验。
通过懒加载，页面加载时只加载可见区域的内容，而延迟加载其他区域的内容。
这样可以减少不必要的请求和提高网页的加载速度。
本文将介绍前端开发中如何实现懒加载，并提供一些实用的方法和技巧。
1. 为什么需要懒加载？随着互联网的发展，网页内容变得越来越丰富和复杂，图片、视频、动画等元素的使用也越来越多。
这些元素在加载时会消耗大量的带宽和资源，导致网页加载速度变慢，影响用户的使用体验。
懒加载可以解决这个问题，它可以根据用户的浏览行为，只加载当前可见区域的内容，提高网页的加载速度，并减少网络流量的使用。
2. 如何实现懒加载？2.1 图片懒加载图片懒加载是最常见和简单的懒加载实现方式。
当用户滚动页面时，只加载可见区域内的图片，其他图片则在用户接近时才进行加载。
可以使用以下代码实现图片懒加载：```javascript// HTML<img class="lazy" data-src="image.jpg">// JavaScriptwindow.addEventListener('scroll', function() {var lazyImages = document.querySelectorAll('.lazy');for (var i = 0; i < lazyImages.length; i++) {if (lazyImages[i].getBoundingClientRect().top < window.innerHeight) {lazyImages[i].src = lazyImages[i].dataset.src;lazyImages[i].classList.remove('lazy');}}});```2.2 延迟加载其他内容除了图片，还可以延迟加载其他内容，比如视频、音频、文字等。
前端开发技术懒加载实现方法
前端开发技术懒加载实现方法懒加载（Lazy Loading）是一种前端开发技术，可以提升网页加载速度和用户体验。
它的基本原理是在页面加载时，只加载当前可视区域内的内容，而延迟加载其他非可视区域的内容。
这种方式较传统的一次性加载所有内容的方式更加高效。
实现懒加载的方法有很多种，下面我们将介绍几种常见的方法。
1. 使用Intersection Observer APIIntersection Observer API 是一种现代浏览器提供的 API，可以监听元素是否进入或离开浏览器视窗，并触发相关的回调函数。
通过使用 Intersection Observer API，我们可以实现懒加载效果。
步骤如下：1) 创建一个 Intersection Observer 对象，指定回调函数和配置项。
2) 通过选择器选择要进行懒加载的元素，并将它们传入 Intersection Observer 对象。
3) 在回调函数中，根据元素进入或离开视窗的情况，执行相应的懒加载操作。
2. 使用zyload插件如果你在项目中使用了jQuery，可以考虑使用zyload插件来实现懒加载效果。
它是一个基于jQuery的轻量级插件，提供了一种简单而有效的懒加载解决方案。
使用步骤如下：1) 引入zyload插件文件。
2) 为需要懒加载的图片添加一个占位符，并设置data-src属性为图片的真实地址。
3) 初始化lazyload插件，即将占位符中的data-src属性值替换为真实地址。
3. 使用Intersection Observer + Intersection Observer Polyfill虽然Intersection Observer API在现代浏览器中得到了广泛支持，但仍有一些老旧的浏览器不支持该API。
为了兼容性考虑，可以使用Intersection Observer Polyfill。
Intersection Observer Polyfill是一种用于填补API缺失的解决方案，可以在不支持API的浏览器中实现类似的效果。
SpringBoot（6）—Bean懒加载@Lazy和循环依赖处理
SpringBoot（6）—Bean懒加载@Lazy和循环依赖处理==========================Bean懒加载@Lazy介绍==================================⼀、问题介绍 Spring在启动时，默认会⽴即将单实例bean进⾏实例化，并加载到Spring容器中。
也就是说，单实例bean默认在Spring容器启动的时候创建对象，并将对象加载到Spring容器中。
如果我们需要对某个bean进⾏延迟加载（延迟到在第⼀次调⽤的时候实例化），我们该如何处理呢？此时，就需要使⽤到@Lazy注解了。
⼆、如何配置懒加载1、在xml配置中<beans ... default-lazy-init="true"> //全局配置<bean ... lazy-init="true" /> //指定bean配置2、在JavaConfig配置中//全局配置@Configuration@Lazypublic class AppConfig {}//指定bean配置@Configurationpublic class AppConfig{@Bean@Lazypublic LazyBean lazyBean(){return new LazyBean();}}3、SpringBoot中指定bean的懒加载,可以在对应的类上直接使⽤@Lazy//指定bean配置@Component@Lazypublic class LazyBean {public LazyBean() {System.out.println("LazyBean should be lazzzzyyyyyy");}public void doSomething() {}} 那么SpringBoot中如何全局配置懒加载呢? 通过在stackoverflow上查找, 发现的答案是, 在启动类SpringbootApplication上加上@Lazy注解即可. 原来注解@SpringBootApplication是@Configuration,@EnableAutoConfiguration和@ComponentScan注解的合体. ⽽这个SpringbootApplication本⾝就是个配置类, 所以在上⾯加@Lazy注解理论上是可以的.果然是直观的东西不⽅便, ⽅便的东西不直观.（1）错误⽅式⼀://spring boot中声明bean@Componentpublic class LazyBean {public LazyBean() {System.out.println("LazyBean should be lazzzzyyyyyy");}public void doSomething() {}}//配置类上加注解@SpringBootApplication@Lazypublic class SpringbootApplication {public static void main(String[] args) {ApplicationContext ctx = SpringApplication.run(SpringbootApplication.class, args);}} 启动应⽤, 发现输出了LazyBean should be lazzzzyyyyyy 也就是说配置并没有⽣效. 但是so上的回答⼀般不会是错的. 那会是哪⾥出了问题呢?（2）⽅式⼀修正 不使⽤@Component, ⽽是在配置⽂件中声明bean://@Componentpublic class LazyBean {public LazyBean() {System.out.println("LazyBean should be lazzzzyyyyyy");}public void doSomething() {}}//配置类@SpringBootApplication@Lazypublic class SpringbootApplication {//在配置类中声明bean@Beanpublic LazyBean lazyBean() {return new LazyBean();}public static void main(String[] args) {ApplicationContext ctx = SpringApplication.run(SpringbootApplication.class, args);}} 这种⽅式实现了懒加载,但是这跟2（在JavaConfig配置中）中的⽅式是⼀样的.（3）⽅式⼆ spring2.2中引⼊了⼀个application.properties中的新属性.zy-initialization=true//指定整个应⽤的懒加载. 这种⽅式不论是@Component声明的bean,还是@Bean声明的bean, 都可以实现懒加载.三、@Lazy的属性 @Lazy只有⼀个属性value，value取值有 true 和 false 两个，默认值是true true 表⽰使⽤延迟加载， false 表⽰不使⽤，false 纯属多余，如果不使⽤，不标注该注解就可以了。
Java单例模式：懒加载（延迟加载）和即时加载
Java单例模式：懒加载（延迟加载）和即时加载引⾔在开发中，如果某个实例的创建需要消耗很多系统资源，那么我们通常会使⽤惰性加载机制（或懒加载、延时加载），也就是说只有当使⽤到这个实例的时候才会创建这个实例，这个好处在单例模式中得到了⼴泛应⽤。
这个机制在单线程环境下的实现⾮常简单，然⽽在多线程环境下却存在隐患。
1、单例模式的惰性加载通常当我们设计⼀个单例类的时候，会在类的内部构造这个类（通过构造函数，或者在定义处直接创建），并对外提供⼀个static getInstance() ⽅法提供获取该单例对象的途径。
public class Singleton{private static Singleton instance = new Singleton();private Singleton(){…}public static Singleton getInstance(){return instance;}}这样的代码缺点是：第⼀次加载类的时候会连带着创建 Singleton 实例，这样的结果与我们所期望的不同，因为创建实例的时候可能并不是我们需要这个实例的时候。
同时如果这个Singleton 实例的创建⾮常消耗系统资源，⽽应⽤始终都没有使⽤ Singleton 实例，那么创建Singleton 消耗的系统资源就被⽩⽩浪费了。
为了避免这种情况，我们通常使⽤惰性加载的机制，也就是在使⽤的时候才去创建。
public class Singleton{private static Singleton instance = null;private Singleton(){…}public static Singleton getInstance(){if (instance == null)instance = new Singleton();return instance;}}2、惰性加载在多线程中的问题先将惰性加载的代码提取出来：public static Singleton getInstance(){if (instance == null)instance = new Singleton();return instance;}这是如果两个线程 A 和 B 同时执⾏了该⽅法，然后以如下⽅式执⾏：A 进⼊ if 判断，此时 foo 为 null，因此进⼊ if 内B 进⼊ if 判断，此时 A 还没有创建 foo，因此 foo 也为 null，因此 B 也进⼊ if 内A 创建了⼀个 Foo 并返回B 也创建了⼀个 Foo 并返回此时问题出现了，我们的单例被创建了两次，⽽这并不是我们所期望的。
lazyload 使用实例
懒加载（lazyload）使用实例什么是懒加载懒加载是一种优化网页性能的技术，也被称为延迟加载。
它的原理是在页面加载时只加载可见区域的内容，而不是一次性加载整个页面。
这样可以减少页面的加载时间和带宽消耗，提升用户体验。
懒加载的优势使用懒加载技术可以带来以下几个优势：1.加快页面加载速度：只加载可见区域的内容，减少了不必要的网络请求和资源加载，提高了页面加载速度。
2.减少带宽消耗：懒加载技术可以减少页面的数据传输量，降低服务器的负载和带宽消耗。
3.提升用户体验：用户只需要等待可见区域的内容加载完成，可以更快地查看页面内容，减少了等待时间，提升了用户体验。
懒加载的实现方式懒加载可以通过多种方式来实现，下面介绍几种常见的实现方式。
1. 图片懒加载图片懒加载是懒加载技术中最常见的一种应用。
当页面滚动到可见区域时，再加载图片，而不是一次性加载所有图片。
这可以通过以下步骤来实现：1.将图片的src属性设置为占位图或者空白图。
2.使用data-src属性保存真实图片的路径。
3.使用JavaScript监听页面滚动事件，判断图片是否进入可见区域。
4.当图片进入可见区域时，将data-src的值赋给src属性，实现图片的加载。
2. 延迟加载 JavaScript在网页中，有些JavaScript文件可能并不是在页面加载时就需要执行的，而是在特定情况下才会被触发。
延迟加载JavaScript可以通过以下方式实现：1.将需要延迟加载的JavaScript代码放在一个函数中。
2.使用JavaScript监听页面滚动事件或者其他触发条件。
3.当触发条件满足时，再动态加载并执行JavaScript代码。
3. 按需加载 CSS有些网页中的CSS文件可能很大，而且并不是在页面加载时就需要全部加载。
按需加载CSS可以通过以下方式实现：1.将需要按需加载的CSS代码放在一个独立的文件中。
2.使用JavaScript监听页面滚动事件或者其他触发条件。
前端开发中的图片懒加载技术实现
前端开发中的图片懒加载技术实现懒加载技术是前端开发中常用的一种优化技术，它能够延迟加载页面中的图片，从而提高页面的加载速度和性能。
在现代的网页设计中，图片通常是页面中最大的资源之一，并且经常会延迟页面的渲染速度，给用户带来不好的体验。
因此，使用懒加载技术可以很好地提高用户的体验。
懒加载技术的实现原理很简单，即将页面上需要加载的图片进行延迟加载，直到用户的视口进入到该图片所在的区域，才开始加载图片。
这样可以大大减少页面的加载时间和网络带宽的消耗。
下面将介绍一种常见的懒加载技术实现方法。
首先，在HTML中将需要懒加载的图片的src属性设为空，例如:<img src="" data-src="路径/图片.jpg">然后，在JavaScript中监听页面滚动事件，判断需要懒加载的图片是否出现在用户的视口中。
当图片出现在视口中时，将其data-src属性的值赋给src属性，实现图片的加载。
代码示例:window.addEventListener('scroll', function() {var lazyImages = document.querySelectorAll('img[data-src]');lazyImages.forEach(function(image) {if (isElementInViewPort(image)) {image.src = image.dataset.src;image.removeAttribute('data-src');}});});isElementInViewPort函数用来判断元素是否出现在视口中，可以通过获取元素的位置和窗口的大小来计算判断。
如果元素的top小于窗口的bottom且元素的bottom大于窗口的top，则元素在视口中。
除了懒加载图片的方式外，还可以通过其他方式来补充优化，例如使用背景图片在CSS中实现。
详解jQuerylazyload懒加载
详解jQuerylazyload懒加载Lazy Load 是⼀个⽤ JavaScript 编写的 jQuery 插件. 它可以延迟加载长页⾯中的图⽚. 在浏览器可视区域外的图⽚不会被载⼊,直到⽤户将页⾯滚动到它们所在的位置. 这与图⽚预加载的处理⽅式正好是相反的.在包含很多⼤图⽚长页⾯中延迟加载图⽚可以加快页⾯加载速度. 浏览器将会在加载可见图⽚之后即进⼊就绪状态. 在某些情况下还可以帮助降低服务器负担.Demo页⾯:基本选项淡⼊效果对不⽀持JavaScript浏览器的降级处理⽔平滚动容器内⽔平滚动容器内垂直滚动页⾯内存在N多图⽚经过五秒钟的延迟后加载图⽚⽤AJAX来加载图⽚如何使⽤Lazy Load 依赖于 jQuery. 请将下列代码加⼊HTML的结尾，也就是</body>前:<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="zyload.js"></script>你必须改变图⽚的标签。
图像的地址必须放在data-original属性上。
给懒加载图像⼀个特定的class（例如:lazy）。
这样你可以很容易地进⾏图像插件捆绑。
代码如下：<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />$(function() {$("zy").lazyload();});这将使所有 class 为 lazy 的图⽚将被延迟加载.Demo:基本选项TIPS:这⾥必须设置图⽚的width和height,否则插件可能⽆法正常⼯作。
前端开发中的懒加载实现方法分享
前端开发中的懒加载实现方法分享在现如今的移动互联网时代，用户对于网页加载速度的要求越来越高。
作为前端开发者，我们需要寻找一种高效的方法来提升网页加载速度，以提升用户体验。
其中，懒加载技术成为了热门话题之一。
本文将为大家分享一些前端开发中常用的懒加载实现方法。
懒加载，又称为延迟加载，是一种通过延迟加载未在用户视野范围内的内容来提升网页性能的技术。
常见的应用场景是在长网页中，当用户滚动到某个区域时，再加载该区域的内容，以减少初始加载量和提升用户体验。
1. 图片懒加载图片懒加载是懒加载技术中最常用的一种。
一般情况下，网页中的大量图片会影响网页加载速度，特别是对于移动设备。
通过使用图片的占位符或者默认图片来替代真实图片，只有当用户滚动到图片所在位置时再加载真实图片，可以显著减少初始加载量。
常见的实现方法是监听滚动事件，判断图片是否进入了用户视野范围内，如果是，则将占位符或默认图片替换为真实图片。
这可以通过获取图片的位置和窗口的滚动位置来实现。
2. 无限滚动懒加载无限滚动懒加载是一种在用户滚动到网页底部时自动加载更多内容的技术。
它常常应用于新闻列表、社交网站等需要长时间滚动的页面。
实现方法是监听网页滚动事件，并判断用户滚动位置是否接近底部。
当用户接近底部时，通过异步加载获取更多内容并添加到页面中。
这样可以延迟加载，减少初始加载量，提高用户体验。
3. 动态加载脚本在一些需要使用到大量脚本的网页中，如果同时加载所有脚本，会导致网页加载时间过长。
此时可以使用动态加载脚本的方法，将一些不必要的脚本延后加载，只在需要时再加载。
常见的实现方法是使用JavaScript动态创建script标签，并设置其src属性为需要加载的脚本地址，然后将该标签插入到页面中。
这样可以根据需求延迟加载脚本，提升网页加载速度。
4. 按需加载在复杂的前端项目中，往往有大量的JavaScript和CSS文件需要加载。
而有些文件可能只在特定的页面或功能中才需要使用。
uniapp小程序懒加载（自己封装组件）
uniapp⼩程序懒加载（⾃⼰封装组件）前⾔⽤uniapp 开发⼩程序，商品的列表页⾯，当然需要⽤到懒加载了，当然我写的这个拉加载只是针对效果图，但是也很炫酷，适合列表哦！！啊哈原理其实就是⽤了@load 和error 的2个⽅法来判断是否加载完全和出错<image class="real-image"@load="onLoaded":src="realSrc":mode="mode"@error="handleImgError"></image>然后就是代码周⼩程序期逻辑了：我封装了成了了组件，还是看代码吧，啊哈LOOK：<!-- 懒加载的loadImage --><template><!-- mode="widthFix" --><view class="lazy-image" :style="{'width': (width? width+'rpx':'100%')}"><image class="real-image"@load="onLoaded":src="realSrc":mode="mode"@error="handleImgError"></image><view :class="loaded?'loaded':''" v-if="!isLoadError"><image :src="placeholdSrc" mode="aspectFit"></image></view><view :class="loaded?'loaded':''" v-if="isLoadError"><image :src="failSrc" mode="aspectFit"></image></view></view></template><script>export default {props:{placeholdSrc:{type:String,default:"../static/easyLoadimage/loading.gif" //loading.gif loadfail.png},failSrc:{type:String,default:"../static/easyLoadimage/loadfail.png" //},realSrc:{type:String,default:""},mode:{type:String,default:"widthFix"},width:{type:String,default:""}},data(){return {loaded:false,isLoadError:false,showImg:false,}},methods:{onLoaded(e){this.loaded = true;this.showImg = true},// 加载错误handleImgError(e) {//console.log(e)this.isLoadError = true;}},// 销毁代码beforeDestroy() {console.log('销毁')this.loaded = false;this.isLoadError = false;}}</script><style lang="scss" scoped>.lazy-image{height: 100%;width: 100%;flex: 1;display: flex;flex-direction: column;align-items: center;position: relative;image{width: 100%;}view{background-color: #eee;position: absolute;z-index: 2;top: 0;left: 0;height: 100%;width: 100%;flex: 1;display: flex;flex-direction: column;align-items: center;transition: opacity 0.4s linear;image{width: 100%;}}.loaded{opacity: 0;}}</style>⽤ css3动画判读isLoadError:false 这个熟悉来判断是否加载然后⽤透明度来把加载的图⽚为0 显⽰对的图⽚地址可以吧。
原生js之图片懒加载实现
目录
目录 (1)
1.什么是图片懒加载 (1)
2.为什么要使用图片懒加载 (1)
3.图片懒加载实现方式 (2)
1.先准备些图片标签 (2)
2.默认处于可视化区域内的图片先显示出来 (2)
3. 给window力口一个滚动事件 (3)
4.给img设置透明和过渡 (3)
5.完整代码 (4)
1.什么是图片懒加载
我们知道了浏览器加载img是很耗费资源的，还有带宽，而且还有一个特点就是如果没有设置img的src属性，就不会消耗这些资源。
所以图片懒加载就是默认先不设置img的src属性，而是等需要显示这张图片时再去设置其src将其显示出来，这就是图片懒加载。
2.为什么要使用图片懒加载
优化性能
3.图片懒加载实现方式
1 .先准备些图片标签
2 .默认处于可视化区域内的图片先显示出来
3 .给window加一个滚动事件
然后给window加一个滚动事件，在事件里面通过循环获取哪些即将显示在可视化容器里面的元素，当其即将显示时就给他设置src 的值。
【滚出来了就显示】
4 .给img设置透明和过渡
为了效果更好看点，可以默认把所有的图片全部设置为透明opacity:0，然后等要显示了就设置为opacity:1,同时加上过渡属性transition: 2s;这样显示时还会有特殊的效果。
5 .完整代码。
lazyload 使用实例 -回复
lazyload 使用实例-回复什么是懒加载（Lazy Load）？懒加载（Lazy Load）是一种前端优化技术，也被称为延迟加载。
它的主要目的是在页面加载时，只加载可见区域的内容，而不加载整个页面的所有内容。
这种技术可以显著提高网页的加载速度和性能。
为什么要使用懒加载？在传统的页面加载方式下，浏览器需要一次性加载并渲染整个页面的内容。
对于包含大量图片、视频或其他资源的页面来说，这将导致页面加载时间过长，用户体验不佳。
通过使用懒加载，可以将页面内容分批加载，提高页面加载速度，减少带宽消耗，并优化用户体验。
如何使用懒加载？使用懒加载最常见的场景是在处理图片时。
当一个页面包含大量图片时，可以将图片的加载推迟到它们进入浏览器可视区域时再进行加载。
步骤一：添加所需的JavaScript 库实现懒加载的关键是使用一些专门的JavaScript 库，比如lazyload.js和zyload.js。
这些库可以帮助我们方便地实现图片懒加载。
步骤二：为需要懒加载的图片添加占位符在HTML 页面中，为需要懒加载的图片添加一个占位符，可以是一张简单的灰色背景图片或其他符合网页主题的图片。
同时，将图片的真实地址保存在一个自定义的属性（比如data-src）中，以便在图片进入可视区域时加载真实图片。
步骤三：初始化懒加载插件在JavaScript 中，通过调用相应的懒加载插件，我们可以初始化并启用懒加载功能。
通常情况下，我们需要指定要进行懒加载的元素选择器（比如图片类名、标签名等）。
步骤四：监听页面滚动事件懒加载的核心原理是监听页面滚动事件。
当用户滚动页面时，通过判断需要懒加载的元素是否进入可视区域，来决定是否加载真实图片。
一旦进入可视区域，插件会根据自定义属性中保存的真实图片地址，将图片加载并渲染到页面上。
步骤五：实现优雅降级尽管懒加载的效果很好，但仍然需要考虑优雅降级。
在某些情况下，用户的浏览器可能不支持JavaScript 或插件无法正常加载。
在前端开发中实现懒加载的最佳实践
在前端开发中实现懒加载的最佳实践在前端开发中，优化网页加载速度是一项重要的任务。
随着移动设备的普及和网络的发展，用户对页面响应速度的要求越来越高。
针对这一需求，懒加载成为了一种常见的优化技术。
本文将介绍在前端开发中实现懒加载的最佳实践。
一、懒加载的原理及优势懒加载（Lazy Loading）是一种页面优化技术，它延迟加载页面中的内容，只有当用户需要时才进行加载。
懒加载的原理是根据用户的行为模式，提前加载用户可能会访问的内容，而不是一次性加载整个页面。
这种技术可以减少页面的初始加载时间，提升用户体验。
懒加载的优势主要体现在以下几个方面：1. 提升网页加载速度：只加载用户需要的内容，减少了不必要的网络请求，加快了页面的加载速度。
2. 减轻服务器压力：由于只加载部分内容，可以减少对服务器的请求次数，降低服务器的负载。
3. 节省带宽消耗：懒加载可以只加载用户可见区域的内容，减少了无效资源的传输，节省了带宽消耗。
二、图片懒加载的实现方式图片懒加载是懒加载技术的一个重要应用场景。
在网页中，图片通常是占用大部分带宽和加载时间的元素之一。
下面介绍几种常见的图片懒加载实现方式。
1. 基于data-src属性的懒加载：这种方式的原理是将图片的真实地址放在data-src属性中，而src属性的值可以设置一个占位图，当图片进入可视区域时，通过JavaScript将data-src的值赋给src属性，实现图片的加载。
这种方式简单易懂，对于常规的图片加载需求比较适用。
2. Intersection Observer API懒加载：Intersection Observer API是一种用于监测网页中元素交叉状态的API，支持懒加载等一系列应用场景。
通过使用Intersection Observer API，可以监听图片元素是否进入可视区域，从而实现懒加载效果。
这种方式相较于传统的监听scroll事件来说，具有更好的性能表现。
图片懒加载原理及实现
图⽚懒加载原理及实现由于过多的图⽚会严重影响⽹页的加载速度，并且移动⽹络下的流量消耗巨⼤，所以说延迟加载⼏乎是标配了。
图⽚懒加载的原理很简单，就是我们先设置图⽚的data-set属性（当然也可以是其他任意的，只要不会发送http请求就⾏了，作⽤就是为了存取值）值为其图⽚路径，由于不是src，所以不会发送http请求。
然后我们计算出页⾯scrollTop的⾼度和浏览器的⾼度之和，如果图⽚举例页⾯顶端的坐标Y（相对于整个页⾯，⽽不是浏览器窗⼝）⼩于前两者之和，就说明图⽚就要显⽰出来了（合适的时机，当然也可以是其他情况），这时候我们再将 data-set 属性替换为 src 属性即可。
图⽚延迟加载的使⽤场景? 往往对于⾸页来说，图⽚较多者（并且固定了宽⾼、这样可以防⽌页⾯抖动、⽐如微博做的就⾮常不好，页⾯变化的厉害，得完！），我们都需要进⾏图⽚延迟加载的设定。
固定宽⾼的延迟加载 这个实现起来⽐较简单，设置好固定宽⾼，那么使⽤上⾯所说的最简单的延迟加载即可。
淘宝就是这么做的，当滚动到视窗可见的区域，就开始加载图⽚，否则不加载图⽚。
⾮固定宽⾼的延迟加载 第⼀种⽅法是：使⽤padding-top或者padding-bottom来实现固定宽⾼⽐。
/entry/22712 这种⽅法的优点是纯css⽅案，缺点是html冗余，对输出到第三⽅不友好。
<div style="padding-top:75%"><img data-src="" alt=""class="lazyload"><div> 第⼆种⽅案是在页⾯初始化阶段利⽤ratio设置实际宽⾼值，优点是html⼲净，对输出到第三⽅友好，缺点是依赖js，理论上⾄少会抖动⼀次。
<img data-src="" alt=""class="lazyload" data-ratio="0.75">进⼀步结合 srcset除了上⾯说的延迟加载，我们可以更进⼀步的引⼊srcset，通过设置srcset来保证加载最匹配的图⽚，这样对于⼀倍屏，⼆倍屏，三倍屏来说，可以做到不浪费流量且效果最好。
vue实现路由懒加载的3种方法示例
vue实现路由懒加载的3种⽅法⽰例前⾔路由懒加载在访问页⾯的时候⾮常重要，能够提⾼⾸页加载速度，避免出现加载时候⽩页，如果没有懒加载，webpack打包后的⽂件会⾮常⼤。
import按需加载（常⽤）vue异步组件webpack提供的require.ensure()1、import按需加载（常⽤）允许将不同的组件打包到⼀个异步块中，需指定了相同的webpackChunkName。
把组件按组分块const A = () => import(/* webpackChunkName: "group-A" */ '@/A/A.vue')const B = () => import(/* webpackChunkName: "group-A" */ '@/A/B.vue')const C = () => import(/* webpackChunkName: "group-A" */ '@/A/C.vue')注意：如果使⽤的是 babel，需要安装syntax-dynamic-import插件，才能使 babel 可以正确地解析语法。
2、vue异步组件使⽤vue的异步组件 , 实现按需加载，每个组件⽣成⼀个js⽂件，实现组件的懒加载。
/* vue异步组件 */{ path: '/A', name: 'A', component: resolve => require(['@/components/A'],resolve) }3、webpack提供的require.ensure()vue-router配置路由，使⽤webpack的require.ensure技术，实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成⼀个js⽂件。
利用原生JS实现懒加载lazyLoad的三种方法总结
利⽤原⽣JS实现懒加载lazyLoad的三种⽅法总结⽬录前⾔Method 1: ⾼度对⽐Method 2: 使⽤getBoundingClientRect() 的APIMethod 3: 采⽤最新的 IntersectionObserver 构造函数总结前⾔⾸先我们先搭建好页⾯如下:<style>* {padding: 0%;margin: 0%;}.contain img {width: 600px;height: 400px;}ul {list-style: none;}li {display: inline-block;}</style><div class="contain"><ul><li><img data-src="./images/iu.jpg" src='./images/lazy.png' alt=""></li><li><img data-src="./images/iu1.jpg" src='./images/lazy.png' alt=""></li><li><img data-src="./images/iu2.png" src='./images/lazy.png' alt=""></li><li><img data-src="./images/iu3.jpg" src='./images/lazy.png' alt=""></li><li><img data-src="./images/iu4.jpg" src='./images/lazy.png' alt=""></li><li><img data-src="./images/iu5.jpg" src='./images/lazy.png' alt=""></li><li><img data-src="./images/iu6.jpg" src='./images/lazy.png' alt=""></li><li><img data-src="./images/iu7.jpg" src='./images/lazy.png' alt=""></li><li><img data-src="./images/iu8.jpg" src='./images/lazy.png' alt=""></li><li><img data-src="./images/iu9.jpg" src='./images/lazy.png' alt=""></li><li><img data-src="./images/iu10.jpg" src='./images/lazy.png' alt=""></li><li><img data-src="./images/zzf_01.jpg" src='./images/lazy.png' alt=""></li></ul></div>我们知道,图⽚懒加载是在滚动条向下滚动时,才判断图⽚是否到达可视区域于是我们需要在滚动监听时判断图⽚是否即将显⽰,所以我们需要将图⽚的真实地址先隐藏起来,即采⽤⾃定义属性 data-src 保存图⽚的真实地址,当滚动条滚动到图⽚能够看到时再加载真实的地址.下⾯我们来看第⼀个⽅法Method 1: ⾼度对⽐这⾥我们采⽤ (元素距顶部的⾼度 - 页⾯被卷去的⾼度 <= 浏览器可视区的⾼度) 来判断是否符合我们想要的条件.这⾥我们需要实时监听页⾯滚动时图⽚的⾼度变化/*** ⽅法⼀* ⾼度对⽐*/let imgs = [...document.querySelectorAll('img')]; // 先获取所有的图⽚window.addEventListener('scroll', function () {})添加完事件后再继续判断图⽚是否达到要求,即/*** ⽅法⼀* ⾼度对⽐*/let imgs = [...document.querySelectorAll('img')]; // 先获取所有的图⽚window.addEventListener('scroll', function () {lazyLoad(imgs)})function lazyLoad(imgs) {for (var i = 0; i < imgs.length; i++) {var height = imgs[i].offsetTop; // 图⽚的距顶部的⾼度var wheight = window.innerHeight; // 浏览器可视区的⾼度var sheight = document.documentElement.scrollTop; // 页⾯被卷去的⾼度if (height - sheight <= wheight) { // 判断图⽚是否将要出现imgs[i].src = imgs[i].dataset.src; // 出现后将⾃定义地址转为真实地址}}}看起来还挺简单的对吧? 不过我们还有更简单的⽅法,如下:Method 2: 使⽤getBoundingClientRect() 的API先附上MDN 对getBoundingClientRect() 的解释我们可以通过 getBoundingClientRect().top来获取元素距视⼝顶部的距离,于是我们就可以⽐较getBoundingClientRect().top 和 window.innerHeight 的值的关系来实现懒加载的效果这⾥使⽤了和属性/*** ⽅法⼆* @params getBoundingClientRect()* 可视区API*/let imgs = [...document.querySelectorAll('img')];window.addEventListener('scroll', function () {imgs.forEach(img => {//这⾥其实和Method1的思想⼀样,不过就是简洁了⼀些if (img.getBoundingClientRect().top < window.innerHeight) {let dataSrc = img.getAttribute(' data-src'); // 获取 data-src 真实的地址img.setAttribute('src', dataSrc); // 将真实的地址替换为 src属性console.log(img.src);}})})Method 3: 采⽤最新的 IntersectionObserver 构造函数看过上⾯两种⽅法,那你是否觉得懒加载还挺简单的对吧?没错,我们写的代码很少,看起来很简单,但是我们忽略了⼀个重要的问题:图⽚替换为真实的地址之后,如果我们反复的拉动滚动条,会⼀直触发 if()条件,所以我在 Method2 ⽅法⾥给了⼀个 console.log(img.src);⽬的就是为了让你看到当有⼈持续不断的拉动滚动条,会⼀直打印 console.log(img.src);那我们怎么去让图⽚真实地址加载完之后,不再触发对它的频繁操作呢?或者说怎么优化游览器的性能呢?好巧不巧,现在有了⼀个新增的构造函数,来解决我们的频繁触发条件语句的问题.这个构造函数就是根据 MDN 上的解释IntersectionObserver()构造器创建并返回⼀个IntersectionObserver对象。
前端性能优化--图片懒加载（lazyloadimage）
前端性能优化--图⽚懒加载（lazyloadimage）话说前头：上次写了⼀篇webpack的学习⼼得，webpack能做到提升前端的性能，其模块打包最终⽣成⼀个或少量的⽂件能够减少对服务端的请求。
除此之外，本次的图⽚懒加载（当然不仅限于图⽚，还可以有视频，flash等）也是⼀种优化前端性能的⽅式。
使⽤懒加载可以想要看图⽚时才加载图⽚，⽽不是⼀次性加载所有的图⽚，从⽽在⼀定程度从减少服务端的请求。
懒加载介绍：通俗介绍：懒加载怎么个懒法，就是你不想看就不给你看，我也懒得加载出来，懒得去请求。
通俗的说就是你不要就不给你，怎么地。
举个栗⼦，⽐如在进⼊某个页⾯的时候，它会有许多的图⽚，有些图⽚可能在下⾯，当我们点进页⾯但没有滑动下去或没看完整个页⾯，那么下⾯的图⽚就会"没⽤"，加载了也⽩加载，⽽且还降低了⽹页的加载速度。
因此⽤懒加载能当滚动到可视区域时才加载当前的图⽚。
原理：图⽚的加载是由src的值引起，当对src赋值时浏览器就会请求图⽚资源，基于这个，可以利⽤html5属性data-XXX来保存图⽚的路径，当我们需要加载图⽚的时候才将data-xxx的值赋予src，酱就能实现图⽚的按需加载，也就是懒加载了。
优点：提⾼前端性能，图⽚在需要的时候才加载，减轻服务的负担，提⾼页⾯的加载速度，能够减少带宽。
懒加载实现⽅式:1.使⽤jquery-lazyload.js，jQuery的插件⽤于懒加载使⽤，需要依赖jQuery。
2.使⽤echo.js：专门⽤于实现懒加载。
-- jquery-lazyload.js 实现⽅式：1.引⼊：在HTML中引⼊jQuery和jQuery-lazyload，如：<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><script type="text/javascript" src="js/zyload.min.js"></script>2.图⽚中不使⽤src属性，因为使⽤src属性后就会默认发送请求请求图⽚，使⽤data-original代替如：<img class="lazy" data-original="images/p1.jpg" style="margin-top:500px" height="300">3.添加jQuery代码：<script type="text/javascript">$(function() {$("zy").lazyload();})</script>-- jquery-lazyload.js的参数:1.threshold :设置Threshold参数来实现滚到距离其xx px时就加载。
angular15的懒加载使用实例
angular15的懒加载使用实例在Angular 15中，懒加载是一个非常有用的功能。
它可以帮助我们优化应用程序的加载性能，特别是当我们的应用程序变得越来越复杂时。
通过懒加载，我们可以将应用程序分成多个模块，并根据需要加载这些模块。
这样可以减少应用程序的初始加载时间，并且只有在用户需要时才会加载额外的模块。
下面我们来看一个实际的例子，来演示如何在Angular 15中使用懒加载。
我们需要创建一个新的模块，用于懒加载的组件。
我们可以使用Angular CLI来快速生成这个模块。
打开命令行工具，进入项目的根目录，然后运行以下命令：```ng generate module lazy-module```这将在项目的src/app目录下创建一个名为lazy-module的模块。
然后，我们需要在这个模块中创建一个组件。
同样，在命令行工具中运行以下命令：```ng generate component lazy-component --module=lazy-module```这将在lazy-module模块中创建一个名为lazy-component的组件。
现在我们可以在这个组件中添加一些内容，以便在页面中显示。
接下来，我们需要在应用程序的路由配置中添加懒加载的路由。
打开项目的src/app目录下的app-routing.module.ts文件，然后在路由配置中添加以下代码：```typescriptconst routes: Routes = [{ path: 'lazy', loadChildren: () => import('./lazy-module/lazy-module.module').then(m => zyModuleModule) } ];```这个配置告诉Angular当用户访问/lazy路径时，加载lazy-module 模块。
注意，我们使用懒加载的方式来导入模块，并且使用then方法来获取模块的引用。