【前端怎样实现图片懒加载？】

前端怎样实现图片懒加载？

前言

图片懒加载是一种优化网页性能的技能，通过延长加载页面中的图片，淘汰初始页面加载时间，提拔用户体验。本文将详细介绍图片懒加载的实现方法、最佳实践以及在现实开发中的应用。
<hr> 关键词

图片懒加载、性能优化、Intersection Observer、data-src、loading=“lazy”、前端开发、前端口试、前端根本、前端进阶、前端工程化、前端开发最佳实践
<hr> 一、懒加载根本

1.1 懒加载的界说

1. <img data-src="image.jpg" alt="Lazy loaded image" class="lazyload">

复制代码

1.2 懒加载的工作原理
初始加载：页面加载时，只加载可看法区的图片
滚动触发：当用户滚动页面时，加载进入视口的图片
延长加载：淘汰初始页面加载时间，提拔性能
二、实现方法

2.1 利用 Intersection Observer

1. document.addEventListener("DOMContentLoaded", function() {
2.    
3.   const lazyImages = document.querySelectorAll('img.lazyload');
4.   
5.   const observer = new IntersectionObserver((entries, observer) => {
6.    
7.     entries.forEach(entry => {
8.    
9.       if (entry.isIntersecting) {
10.    
11.         const img = entry.target;
12.         img.src = img.dataset.src;
13.         img.classList.remove('lazyload');
14.         observer.unobserve(img);
15.       }
16.     });
17.   })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。