logo

该视频仅会员有权观看

立即开通课程「Next.js 前端应用开发实践」权限。

¥
199
/ 年

懒加载图像(Lazy)

  • 图像可以在页面顶部导入。
  • 导入后可以复制本地图像,并更改其名称和文件位置。
  • 在组件中,可复制多份图像并修改组件的 src 属性。
  • 页面预计展示四个图像:p二,p三,p四。
  • 然而,在刷新页面并查看开发者工具后发现,只加载了两张图片。
  • 这是因为Next.js框架中的Image组件使用了懒加载功能,只在需要时加载图片。
  • 图像元素的 loading 属性被设置为 lazy
  • 当页面向下滚动至特定位置时,浏览器将加载即将显示的图像。