懒加载的介绍

懒加载，也被称为延迟加载或按需加载，是一种优化网页加载性能的技术，它能够延迟加载某些不需要立即显示的资源，例如图片、视频、脚本等，直到用户需要它们或者它们即将进入视口时才加载。

懒加载的主要优点包括：

减少无用资源的加载：在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。
提升用户体验：如果同时加载较多图片，可能需要等待的时间较长，这样影响了用户体验，而使用懒加载就能大大的提高用户体验。
防止加载过多图片而影响其他资源文件的加载：会影响网站应用的正常使用。

懒加载的实现原理主要是利用视口（viewport）的概念。视口是指用户在网页上可见的区域，也就是用户当前在屏幕上看到的部分。懒加载会在滚动事件发生时检测视口的变化，当某个元素即将进入视口时，就触发加载事件。

一般来说，懒加载的实现需要依赖于浏览器的滚动事件和元素可见性检测技术。常见的实现方式是使用Intersection Observer API，它可以在元素进入或离开视口时触发回调函数，从而进行加载或卸载操作。

简单实现图片懒加载

在网页中，图片通常是加载最慢的元素之一，因为图片文件通常比 HTML、CSS 和 JavaScript 代码大得多。为了提高页面加载速度和性能，我们可以使用图片懒加载（Lazy Loading）技术。

图片懒加载的原理是，当用户滚动页面时，只有当图片即将进入视口（即进入用户当前可见的区域）时才加载图片。这可以减少首次加载页面的时间，同时也可以减少用户浏览页面时的网络流量。

以下是一个简单的 JavaScript 实现图片懒加载的示例：

首先，在 HTML 文件中定义一个图片元素，例如：


	<img id="lazy-load" src="placeholder.jpg" data-src="real-image.jpg">

这里使用了 data-src 属性来存储真实的图片 URL。

然后，在 JavaScript 文件中实现一个简单的懒加载函数，例如：


	function lazyLoad() {  

	  const lazyImage = document.querySelector('#lazy-load');  

	  const placeholderSrc = lazyImage.src;  

	  const realSrc = lazyImage.getAttribute('data-src');  

	  

	  // 当图片即将进入视口时加载图片  

	  window.addEventListener('scroll', () => {  

	    if (isElementInViewport(lazyImage)) {  

	      lazyImage.src = realSrc;  

	      lazyImage.removeAttribute('data-src');  

	    }  

	  });  

	  

	  // 判断元素是否在视口内  

	  function isElementInViewport(el) {  

	    const rect = el.getBoundingClientRect();  

	    return (  

	      rect.top >= 0 &&  

	      rect.left >= 0 &&  

	      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&  

	      rect.right <= (window.innerWidth || document.documentElement.clientWidth)  

	    );  

	  }  

	}

这里使用了 isElementInViewport 函数来判断图片是否在视口内。如果图片在视口内，则将 src 属性设置为真实的图片 URL，并从元素中移除 data-src 属性。如果图片不在视口内，则保持 src 属性为占位符图片 URL。

最后，在页面加载完成后调用 lazyLoad 函数：


	window.onload = lazyLoad;

这样就可以实现简单的图片懒加载功能了。当用户滚动页面时，只有当图片即将进入视口时才加载图片，从而提高页面加载速度和性能。

关于其他类型的懒加载

视频懒加载

视频的懒加载主要是在视频播放器加载完成后才请求视频资源，以减少用户的等待时间和流量消耗。

实现视频的懒加载主要有以下几种方式：

使用HTML5的视频标签（video tag）和JavaScript API来控制视频的加载和播放。可以在视频标签中设置“src”属性为空的占位符，然后通过JavaScript动态设置“src”属性来实现懒加载。这种方式需要在浏览器中启用自动播放视频的功能，否则无法实现懒加载。
使用第三方视频播放器，例如Video.js、JW Player等。这些播放器通常提供了丰富的API和事件回调，可以用来控制视频的加载和播放。可以在页面加载完成后，将视频的URL传递给播放器，然后通过播放器的API来控制视频的加载和播放。
使用HTTP/2的流控制机制来实现视频的懒加载。在HTTP/2中，服务器可以将多个资源打包成一个流，然后通过一个TCP连接发送给客户端。因此，可以将视频分割成多个小块，然后通过多个HTTP/2流发送给客户端。客户端可以根据需要下载每个小块，然后将它们组合成一个完整的视频文件。这种方式可以在不依赖于浏览器自动播放视频的情况下实现视频的懒加载。

无论使用哪种方式，都需要考虑如何处理视频的缓存、版权保护、网络状况等问题。此外，还需要注意用户隐私和安全问题，例如不要在未经用户同意的情况下自动播放带有广告或敏感信息的视频。

js脚本的懒加载

脚本的懒加载主要是为了按需加载脚本，以避免一次性加载过多脚本而影响页面性能和用户体验。实现脚本的懒加载可以通过以下几种方式：

使用async和defer属性，将脚本标签放置在HTML文档中合适的位置，并设置async或defer属性，以控制脚本的加载和执行时间。
使用动态脚本加载，通过JavaScript动态创建script标签，并设置src属性为脚本的URL，以实现懒加载。
使用模块化加载，将脚本打包成多个模块，然后根据需要动态加载需要的模块。这种方式通常使用AMD（Asynchronous Module Definition）或CommonJS规范来实现。

此外，需要注意不要过度使用懒加载，否则会增加页面加载时间和复杂度，反而影响用户体验。

css样式的懒加载

CSS的懒加载主要是在需要时才加载样式表，以减轻浏览器的负担和提高页面加载速度。实现CSS的懒加载可以通过以下几种方式：

使用link标签，将样式表URL设置在“href”属性中，然后通过JavaScript动态设置“rel”属性为“stylesheet”，以实现懒加载。
使用@import规则，在样式表中通过@import规则引入外部样式表，然后通过JavaScript动态插入这个样式表，以实现懒加载。
使用Intersection Observer API来检测元素是否进入视口，然后根据需要加载样式表。这种方式需要将样式表打包成一个JavaScript文件，然后通过JavaScript动态插入到页面中。

10分钟教你手搓js图片懒加载 ｜ 青训营