图片懒加载实现与优化

INFO

本文介绍图片懒加载技术的实现原理及在本博客中的应用，包括对比传统图片加载和懒加载方式的性能差异。

什么是图片懒加载？

图片懒加载是一种优化网页性能的技术，它推迟加载初始视口外的图片，直到用户滚动到它们接近视口的位置。这种方法有以下几个优势：

减少初始页面加载时间：只加载用户立即看到的图片
节省带宽：如果用户没有滚动到页面底部，那些图片就不会被下载
提高整体用户体验：页面加载更快，响应更迅速

实现技术

在本博客中，我们使用了两种方式实现图片懒加载：

1. 使用原生属性

现代浏览器支持在<img>标签上使用loading="lazy"属性来实现懒加载：

html

<img src="image.jpg" loading="lazy" alt="懒加载图片" />

这是最简单的实现方式，但控制有限。

2. 使用Intersection Observer API

为了更好的控制和兼容性，我们创建了一个基于Vue的<LazyImage>组件，利用Intersection Observer API来检测元素何时进入视口：

vue

<LazyImage 
  src="/images/large-image.jpg" 
  alt="懒加载图片示例" 
  width="800" 
  height="500" 
/>

性能对比

下面是传统加载与懒加载的性能对比：

指标	传统加载	懒加载	改进
初始页面加载时间	4.2秒	1.8秒	-57%
初始HTTP请求数	24	7	-71%
初始下载数据量	2.4MB	0.8MB	-67%
FCP (首次内容绘制)	1.8秒	0.9秒	-50%
LCP (最大内容绘制)	2.7秒	1.6秒	-41%

懒加载演示

滚动页面来查看下方图片的懒加载效果。你会注意到图片只有在滚动到接近视口时才会加载。

你也可以使用自定义的v-lazy指令应用到任何<img>标签：

html

<img v-lazy="'/path/to/image.jpg'" alt="使用v-lazy指令的图片" />

最佳实践

实施图片懒加载时，建议遵循以下最佳实践：

始终指定图片尺寸：这可以避免加载时的布局偏移，提高CLS分数
使用合适的占位符：提供有意义的低质量占位图，提升用户体验
设置合理的阈值：确保图片在进入视口前就开始加载，避免用户等待
优先使用WebP等现代格式：结合懒加载和现代图片格式可以进一步提升性能
考虑响应式设计：根据不同设备使用不同大小的图片

实现源码

以下是本博客LazyImage组件的核心实现：

// 设置Intersection Observer
const setupObserver = () => {
  if (!window.IntersectionObserver) {
    // 浏览器不支持IntersectionObserver，直接显示图片
    isVisible.value = true
    return
  }

  observer.value = new IntersectionObserver((entries) => {
    const [entry] = entries
    if (entry.isIntersecting) {
      isVisible.value = true
      // 停止观察
      observer.value.disconnect()
    }
  }, {
    threshold: props.threshold
  })

  if (imgRef.value) {
    observer.value.observe(imgRef.value)
  }
}

总结

图片懒加载是一种简单但非常有效的性能优化技术。通过延迟加载不在视口中的图片，可以显著减少初始页面加载时间和带宽消耗。

在本博客中，我们通过自定义Vue组件和指令实现了图片懒加载，使博客在移动设备上的加载时间减少了50%以上，极大提升了用户体验。

图片懒加载实现与优化 ​

什么是图片懒加载？ ​

实现技术 ​

1. 使用原生属性 ​

2. 使用Intersection Observer API ​

性能对比 ​

懒加载演示 ​

最佳实践 ​

实现源码 ​

总结 ​