JS如何实现图片懒加载优化 3种图片懒加载方案提升网页加载速度
最新回答
隨遇而安
2022-09-05 01:56:22
图片懒加载通过延迟加载非首屏图片提升页面性能，核心思路是延迟加载，先将<img>标签的src属性设为空，把真实图片地址放在自定义属性（如data-src）中，等图片进入视窗再加载。以下是三种常用实现方案：
方案一：基于scroll事件监听这是传统做法，监听window的scroll事件，每次滚动检查图片是否进入视窗。
const images = document.querySelectorAll('img[data-src]');function lazyLoad() { images.forEach(img => { if (isInViewport(img) && img.dataset.src) { img.src = img.dataset.src; img.removeAttribute('data-src'); } });}function isInViewport(element) { const rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) );}lazyLoad();window.addEventListener('scroll', lazyLoad);window.addEventListener('resize', lazyLoad);缺点：scroll事件触发频率高，图片多时会频繁执行lazyLoad函数，导致性能问题。可用throttle或debounce优化。
方案二：使用Intersection Observer API这是更现代高效的方案，能异步监听元素是否进入视窗，不阻塞主线程。
const images = document.querySelectorAll('img[data-src]');const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.removeAttribute('data-src'); observer.unobserve(img); } });});images.forEach(img => { observer.observe(img);});优点：性能更好，代码更简洁。
方案三：配合loading="lazy"属性现代浏览器原生支持该属性，可直接在<img>标签使用，无需编写JavaScript代码。
<img loading="lazy" alt="Image">特点：方案最简单，但兼容性可能存在问题，需根据实际情况选择。
图片懒加载的占位图设计占位图在图片加载完成前显示临时图片，防止页面空白，设计要点如下：
- 颜色和尺寸：颜色与页面背景色相近，尺寸与实际图片一致，避免页面布局跳动。
- 使用低质量图片：用实际图片的低质量版本作为占位图，用户可看到图片轮廓。
- 使用SVG占位符：SVG创建简单矢量图形作为占位符，体积小，不影响页面加载速度。
- 使用CSS渐变：CSS渐变创建平滑颜色过渡效果作为占位图，视觉效果更好。
图片加载失败常见，需妥善处理，方法如下：
- 显示默认图片：设置默认图片，加载失败时显示。
- 重试加载：尝试重新加载图片，设置最大重试次数，避免无限循环。
- 显示错误信息：显示错误信息提示用户图片加载失败。
- 监控错误：用onerror事件监听图片加载错误，并上报到监控系统排查问题。
懒加载可能影响SEO，若搜索引擎无法抓取懒加载图片，会影响网站排名，优化方法如下：
- 确保搜索引擎可抓取图片：确保搜索引擎能执行JavaScript代码，或提供<noscript>标签包含图片真实地址。
- 使用loading="lazy"属性：搜索引擎通常能识别该属性并正确抓取图片。
- 优化图片大小：减少加载时间，提升SEO效果。
- 使用CDN：加速图片加载速度，提升SEO效果。
- 使用正确的alt属性：为图片添加正确alt属性，方便搜索引擎理解图片内容。
热门标签
