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

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

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

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

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

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

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