优化网页性能小技巧:图片懒加载的原理及方法

2022-11-19 904阅读

221119wz1.jpg

在优化网站上面,很多人都会遇到访问速度问题,尤其文章载入的图片多了,打开的速度自然就慢了,那么有什么办法能提高网站打开速度吗?答案有的,比如有一个懒加载,就非常的不错。

懒加载也叫延迟加载,顾名思义,指的是在网页中延迟加载图片的时机,当用户需要访问网页时,先让网页加载出来,让浏览器把其他的内容渲染出来,然后在访问的过程中加载图片,这样可以提高网站的首屏加载速度,提升用户的体验,并且可以减少服务器的压力。

这个比较适用图片很多,页面很长的网站场景,如果服务器速度比较慢的时候,就能明显感觉到这个技术的优势了。尤其是追求网页打开速度,可以去体验一下哦。

懒加载的实现原理是,将页面上的图片的src属性设置为空字符串,将图片的真实路径保存在一个自定义属性中,当页面滚动的时候,进行判断,如果图片进入页面可视区域内,则从自定义属性中取出真实路径赋值给图片的src属性,以此来实现图片的延迟加载。这样做能防止页面一次性向服务器发送大量请求,导致服务器响应面,页面卡顿崩溃等。

以前想让网站图片懒加载,都是通过JS来实现,网上也有人写相应的代码或插件,有一些网站主题集成了懒加载的JS,其实从Chrome76开始(2019年发布),谷歌浏览器内核原生支持懒加载属性,直接在img标签里面加上【loading="lazy"】属性,浏览器会自动实现懒加载。

如果使用的主题,集成了懒加载的标签,就不用一一设置了,这个是最简单的办法,如果主题里没有的话,还想体验懒加载,对于技术咖来说不是难事,在自己的主题里面加上该属性,而如果没有修改主题的能力,可以在文章添加图片的同时,在图片代码里,加上一段【loading="lazy"】属性,也能实现懒加载的效果。




【温馨提示】:如未注明,文章均为原创,每天更新,收藏关注我们哦。未经允许,禁止文章转载!
【推荐阅读】如何手机免费赚零花?赏帮赚:任务众帮悬赏兼职
【长期福利】打开支付宝APP,在搜索框输入数字口令:797265314领取支付宝随机红包
【长期福利】扫码领饿了么最高20元外卖红包,每天点外卖下单折扣使用
交流Q群:9556339圈子Q群:18883322线报③群:57832663线报④群:13611879 

取消
微信二维码
微信二维码
支付宝二维码