优化网页性能技巧，图片懒加载及原理

在优化自己网站上面，很多人会遇到访问速度慢以及图片加载不出来的问题，一篇文章如果图片多了那么他的打开速度自然慢了很多，那么有什么办法可以快速打开网站速度吗？

答案是有的，比如一个懒加载就非常不错，懒加载也叫延迟加载，在网页中延迟加载图片，当用户访问网页时，先让网页加载出来，让流浪器把内容显示出来，这样可以提高网站的首屏速度，提升用户体验，减少服务器的压力。

这个比较适合一些多图片或者页面很长的网站页面，如果服务器访问速度比较慢，这个就非常好用了，懒加载的原理非常简单，就是将页面上图片SRC属性设置为空字符串，将图片的真实路径保存在一个自定义的属性当中，当页面滚动时进行判断，如果图片进入页面可视区域，则从自定义中取出真实路径赋值给图片SRC属性，以此来实现图片加载延迟，这样做防止页面一次性向服务器发送大量请求，导致服务器响应慢以及卡顿等问题。

时候想要网站图片懒加载，都是通过JS来完成，网上也有很多人写相应的代码插件，有一些网站主题集成开）了懒加载的js，其实这是从CHROME

谷歌浏览器内核原生支持懒加载属性，直接在img标签里面加上【loading=”lazy”】属性，浏览器会自动实现懒加载。

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