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