logo

该视频仅会员有权观看

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

¥
199
/ 年
订阅后全站课程均可学习
Next.js 前端应用开发实践

Next.js 前端应用开发实践

懒加载图像（Lazy）

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