立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 369|回复: 0

[Wordpress 通用教程] 关于网站图片的渐进式加载和懒加载的实现的方法

[复制链接]
发表于 2024-1-15 21:16:32 | 显示全部楼层 |阅读模式
道勤网-数据www.daoqin.net

亲注册登录道勤网-可以查看更多帖子内容哦!(包涵精彩图片、文字详情等)请您及时注册登录-www.daoqin.net

您需要 登录 才可以下载或查看,没有账号?立即注册

x
衡量一个网站html" target="_blank" class="relatedlink">seo做得好不好的一个重要指标,是页面的打开速度,而影响一张网页打开速度的一个很重要的因素,是加载图片的大小。目前网络上流行的两个优化图片的概念,分别是渐进式加载懒加载。一个好的网站,需要同时对图片都做到渐进式加载和懒加载这两种处理。
懒加载,意思是浏览器加载页面的时候先不加载图片,视窗滚动到能显示图片的位置的时候,图片再自动加载。这样可以避免打开页面的同时因为要加载图片,导致的页面打开时间变长的问题。目前主流浏览器已经都可以不用JS实现了,只要给图片加上loading=”lazy”的属性即可。wordpress基本已经替我们自动实现了,只要是通过content或者thumbnail相关的函数调用的图片,WP自动会给它们加上这个属性:
01.jpg
不得不提一下,WordPress更妙的地方在于它不仅自动实现了懒加载,还自动实现了用srcset和sizes属性在不同的屏幕尺寸上调用适合的大中小图,避免流量浪费。这些大中小图都是后台预设并自动生成的,不需要你多花一分的力气。这可是很久以前就实现了
接下来说渐进式加载。不同于懒加载是为了提升页面加载速度,渐进式加载主要还是为提升观感服务的,它并不会加快页面打开速度,单纯只是为了让图片加载过程显得“好看”而已。渐进式加载图片大致效果如下:
02.gif
以前我们会用JS去调用一张模糊图片,并监听原图的加载,加载原图完成后再替换模糊图片显示。你可以得出一个结论,渐进式加载由于要多加载一张模糊图片,总的加载量反而是更多的,开销反而变大了。现在有了更容易的实现方式,就是在导出图片的格式上勾选一下即可,不需要再用到任何JS脚本和额外的图片了。
以Photoshop导出JPG为例,只要保存的时候选择“连续”,这样的图片放在网页上,加载的时候自动会有一个模糊到清晰的效果
03.jpg
我们做的网站,对这些技术细节贯彻是很彻底的。对于图片来说,懒加载和渐进式加载同时都要做好,同时在使用图片之前还要对图片的格式尽可能优化,这样才能保证每个页面的加载速度。



道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户,那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信:q792472177免费电话、后台提交工单这些方式联系道勤主机客服! 如果您不是我们的客户也没问题,点击页面最右边的企业QQ在线咨询图标联系我们并购买后,我们为您免费进行无缝搬家服务,让您享受网站零访问延迟的迁移到道勤主机的服务!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

道勤网- 推荐内容!上一条 /2 下一条

!jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回复 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号-1 )

GMT+8, 2024-2-25 04:42

Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

快速回复 返回顶部 返回列表