前言： 为什么我要单独写一篇关于图片懒加载的文章？图片展示是前端开发中必不可少的一项操作，而且图片在前端包体积中往往是占比最大的一部分。因此针对图片优化前端也有很多方案，今天要说的就是一种非常简单且使用的前端图片优化方案——img标签原生懒加载。 img标签原生懒加载是什么？ 本文说的图片懒加载主要是Chrome 77版本以后支持的一个img标签新属性loading，loading是用来指示浏览器应当如何加载该图像资源。 loading有两个可选的值： 如何使用img标签原生懒加载？ 没错！就是这么简单，开发者只需要在img标签上添加 loading 属性并且属性值为 lazy 即可~ 当然，还有一个必不可少的问题就是，用户的浏览器必须满足下图的版本要求。 如何验证loading="lazy"是否生效？ 我给大家准备了一个小demo，放在评论区大家可以使用浏览器访问，并在控制台中查看图片请求情况。正常情况和下图应该是一样的，默认加载了前几张图片，其他的图片需要滚动到接近浏览器可视区域范围才会被请求。 从上面的图中可以看出来，目前主流浏览器厂商对img标签的原生懒加载支持率还不是很高。就我个人观点，我认为一个技术的进步往往是艰苦漫长的，要想让某一技术被人广泛接受就一定有足够的用户量存在才行。而我们这些做技术的以及产品的第一批用户，我们有义务把新的、好的技术，积极地应用并推广起来。 所以，尽管如此我还是选择单独出一篇文章用来讲img标签的loading属性。其他的图片懒加载方案也有很多，兼容性也比loading属性更好，但相对的比loading属性就麻烦一些。后面我会接着分享其他方案的图片懒加载技术。 总结： 每一个开发人员接手项目都要做两步思考，第一步是如何把功能实现，第二步就是如何在功能实现的基础上把项目性能做到最优。作为一名开发者，要有一定的追求，不仅仅要把需求做出来，还要做好。 这么简单的图片优化方案，大家有机会一定要应用一下呀！[憨笑]
<img src="./img/img_1.webp" alt="今日头条_前端开发eagle" loading="lazy">
