网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

JavaScript实现懒加载-创新互联

文章目录
  • 前言
  • 一、懒加载是什么?
  • 二、懒加载的特点。
  • 三、懒加载的实现原理。
  • 四、实现懒加载。
  • 五、懒加载结果展示。
  • 总结

成都创新互联公司专业提供达州托管服务器服务,为用户提供五星数据中心、电信、双线接入解决方案,用户可自行在线购买达州托管服务器服务,并享受7*24小时金牌售后服务。
前言

身为开发人员的我们进行项目开发时,不仅仅要对页面进行设计,而且还要考虑项目上线后是否能进行性能优化,从而达到减轻对服务器的负载,让用户拥有一个友好的项目体验感。常见的项目性能优化方式有很多。例如:减少HTTP请求,减少DNS查询,避免重定向,图片懒加载等。接下来,为大家介绍项目性能优化之一 —图片懒加载。

一、懒加载是什么?

懒加载也叫延迟加载,按需加载。指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分图片数据,这样就浪费了性能。
如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前,可视化区域之外的图片不会进行加载,在滚动屏幕时才加载。这样使得网页的加载速度更快,减少了服务器的负载。懒加载适用于图片较多,页面列表较长(长列表)的场景中。
原文链接:点击跳转

二、懒加载的特点。
  • 减少无用资源的加载:使用懒加载明显减少了服务器的压力和流量,同时也减小了浏览器的负担和服务器的负载。
  • 提升用户体验:如果同时加载较多图片,可能需要等待的时间较长,这样影响了用户体验,而使用懒加载就能大大的提高用户体验。
  • 防止加载过多图片而影响其他资源文件的加载 :会影响网站应用的正常使用。
三、懒加载的实现原理。
  • 首先准备需要的img标签。图片(注意:此处包含了未加载时需要展示的图片)
  • img标签src属性都设置为未加载时展示图片的路径,并设置对应的data-xxx(此处我使用data-src)为真正需要展示图片的路径。
  • 判断当前图片是否已经进入用户浏览器的可视区域,若未进入,则继续展示未加载时展示的图片;如已进入,则将data-src中真正的图片路径动态赋值给src属性,从而将图片进行加载,最后达到懒加载的功能。
四、实现懒加载。

使用原生JavaScript实现

blankblankblankblankblankblankblankblank
五、懒加载结果展示。

可以观察到只有当用户将图片滑动至浏览器可视区域,真正的图片地址才会被请求,从而达到懒加载的效果(注意: 视频有背景音乐,请谨慎播放)。

总结

这是我在做项目时使用到的性能优化操作 —图片懒加载,鉴于自身实力的有限,可能在文章讲解中出现错误,大家可以私信或评论指出错误。创作不易,点个赞呗。同时有任何疑问我们一起交流,一起成长。如果有更好的文章,也欢迎贴在下面哦,我们相互学习。

你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧


网站题目:JavaScript实现懒加载-创新互联
当前链接:http://bjjierui.cn/article/gejgg.html

其他资讯