关于网站图片的渐进式加载和懒加载的实现的方法

美工学习

衡量一个网站html" target="_blank" class="relatedlink">seo做得好不好的一个重要指标，是页面的打开速度，而影响一张网页打开速度的一个很重要的因素，是加载图片的大小。目前网络上流行的两个优化图片的概念，分别是渐进式加载和懒加载。一个好的网站，需要同时对图片都做到渐进式加载和懒加载这两种处理。

懒加载，意思是浏览器加载页面的时候先不加载图片，视窗滚动到能显示图片的位置的时候，图片再自动加载。这样可以避免打开页面的同时因为要加载图片，导致的页面打开时间变长的问题。目前主流浏览器已经都可以不用JS实现了，只要给图片加上loading=”lazy”的属性即可。wordpress基本已经替我们自动实现了，只要是通过content或者thumbnail相关的函数调用的图片，WP自动会给它们加上这个属性：

不得不提一下，WordPress更妙的地方在于它不仅自动实现了懒加载，还自动实现了用srcset和sizes属性在不同的屏幕尺寸上调用适合的大中小图，避免流量浪费。这些大中小图都是后台预设并自动生成的，不需要你多花一分的力气。这可是很久以前就实现了

接下来说渐进式加载。不同于懒加载是为了提升页面加载速度，渐进式加载主要还是为提升观感服务的，它并不会加快页面打开速度，单纯只是为了让图片加载过程显得“好看”而已。渐进式加载图片大致效果如下：

以前我们会用JS去调用一张模糊图片，并监听原图的加载，加载原图完成后再替换模糊图片显示。你可以得出一个结论，渐进式加载由于要多加载一张模糊图片，总的加载量反而是更多的，开销反而变大了。现在有了更容易的实现方式，就是在导出图片的格式上勾选一下即可，不需要再用到任何JS脚本和额外的图片了。

以Photoshop导出JPG为例，只要保存的时候选择“连续”，这样的图片放在网页上，加载的时候自动会有一个模糊到清晰的效果

我们做的网站，对这些技术细节贯彻是很彻底的。对于图片来说，懒加载和渐进式加载同时都要做好，同时在使用图片之前还要对图片的格式尽可能优化，这样才能保证每个页面的加载速度。

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