从品牌网站建设到网络营销策划,从策略到执行的一站式服务
身为开发人员的我们进行项目开发时,不仅仅要对页面进行设计,而且还要考虑项目上线后是否能进行性能优化
,从而达到减轻对服务器
的负载,让用户拥有一个友好的项目体验感。常见的项目性能优化
方式有很多。例如:减少HTTP请求,减少DNS查询,避免重定向,图片懒加载
等。接下来,为大家介绍项目性能优化之一 —图片懒加载。
懒加载也叫延迟加载,按需加载。指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化
的方式。在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分图片数据,这样就浪费了性能。
如果使用图片的懒加载
就可以解决以上问题。在滚动屏幕之前,可视化区域之外的图片不会进行加载,在滚动屏幕时才加载。这样使得网页的加载速度更快,减少了服务器的负载。懒加载适用于图片较多,页面列表较长(长列表)的场景中。
原文链接:点击跳转
懒加载
明显减少了服务器的压力和流量,同时也减小了浏览器的负担和服务器的负载。懒加载
就能大大的提高用户体验。img标签。
和图片
(注意:此处包含了未加载时
需要展示的图片)img标签
的src属性
都设置为未加载时展示图片的路径,并设置对应的data-xxx
(此处我使用data-src
)为真正需要展示图片的路径。是否已经进入
用户浏览器的可视区域,若未进入,则继续展示未加载时展示的图片;如已进入,则将data-src
中真正的图片路径动态赋值
给src属性,从而将图片进行加载,最后达到懒加载
的功能。使用原生JavaScript实现
![blank](https://blog.csdn.net/weixin_51422386/article/details/images/img01.webp)
![blank](https://blog.csdn.net/weixin_51422386/article/details/images/img01.webp)
![blank](https://blog.csdn.net/weixin_51422386/article/details/images/img01.webp)
![blank](https://blog.csdn.net/weixin_51422386/article/details/images/img01.webp)
![blank](https://blog.csdn.net/weixin_51422386/article/details/images/img01.webp)
![blank](https://blog.csdn.net/weixin_51422386/article/details/images/img01.webp)
![blank](https://blog.csdn.net/weixin_51422386/article/details/images/img01.webp)
![blank](https://blog.csdn.net/weixin_51422386/article/details/images/img01.webp)
五、懒加载结果展示。可以观察到只有当用户将图片滑动至浏览器可视区域,真正的图片地址才会被请求,从而达到懒加载的效果(注意: 视频有背景音乐,请谨慎播放)。
总结这是我在做项目时使用到的性能优化操作 —图片懒加载
,鉴于自身实力的有限,可能在文章讲解中出现错误,大家可以私信或评论指出错误。创作不易,点个赞呗。同时有任何疑问我们一起交流,一起成长。如果有更好的文章,也欢迎贴在下面哦,我们相互学习。
你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图