课程
文档
训练营
价格
博客
该视频仅会员有权观看
立即开通课程「Next.js 前端应用开发实践」权限。
¥
199
/ 年
立即订阅
订阅后全站课程均可学习
Next.js 前端应用开发实践
自动播放下一节
is off
off
首页
课程
Next.js 前端应用开发实践
懒加载图像(Lazy)
懒加载图像(Lazy)
Ne
Next.js 前端应用开发实践
图像可以在页面顶部导入。
导入后可以复制本地图像,并更改其名称和文件位置。
在组件中,可复制多份图像并修改组件的
src
属性。
页面预计展示四个图像:p二,p三,p四。
然而,在刷新页面并查看开发者工具后发现,只加载了两张图片。
这是因为Next.js框架中的Image组件使用了懒加载功能,只在需要时加载图片。
图像元素的
loading
属性被设置为
lazy
。
当页面向下滚动至特定位置时,浏览器将加载即将显示的图像。
上一节
理解Image 组件的图像优化
下一节
在 Image 组件里用 priority 属性设置优先要加载的图像