1.前端性能优化的重要方案,通过图片或者数据的延迟加载,我们可以加快页面渲染速度,让第一次打开页面速度加快,只有滑动到某个区域,才加载真实的图片,这样也可以节省加载的流量,
2.处理方案 把所有需要延迟加载的图爿用一个盒子包起来,设置宽高和默认占位图。开始让所有的IMg的src为空,把真实的地址放到IMG的自定义属性上,让IMG隐藏,等到所有其他资源都加载完后,我们再开始加载图爿,对于很多图爿,需要当页面滚动时候,当前图爿完全显示出来后仔加载真实图片
一条程序狗 ©著作权
文章标签 图片懒加载 文章分类 JavaScript 前端开发
1.前端性能优化的重要方案,通过图片或者数据的延迟加载,我们可以加快页面渲染速度,让第一次打开页面速度加快,只有滑动到某个区域,才加载真实的图片,这样也可以节省加载的流量,
2.处理方案 把所有需要延迟加载的图爿用一个盒子包起来,设置宽高和默认占位图。开始让所有的IMg的src为空,把真实的地址放到IMG的自定义属性上,让IMG隐藏,等到所有其他资源都加载完后,我们再开始加载图爿,对于很多图爿,需要当页面滚动时候,当前图爿完全显示出来后仔加载真实图片
下一篇:Vue实现电商后台管理系统
如果是一个图片列表页,虽然好看,但是相关图片的加载要耗费非常长的时
1.为什么需要做图片的懒加载 =>第一次加载页面的时候,如果请求真实图片资源,会减缓页面的渲染速度,为了提高首次打开的体验度,我们最开始不加载真实的图片资源(比如大小很小的背景图片),只有当第一次页面整体都渲染完成后,页面中已经呈现出除图片以外的其它资源后
前段实现图片懒加载 在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性
举报文章
请选择举报类型
补充说明
0/200
上传截图
格式支持JPEG/PNG/JPG,图片不超过1.9M