加载中图片 转圈_图片懒加载原理 从简单到复杂

作者：hateonion

https://hateonion.me/posts/19jan30/

图片懒加载是一个很重要的前端性能优化手段。这篇文章将从懒加载的最简单场景开始介绍，逐步增加复杂度，希望能讲清楚常见的图片懒加载场景及在该场景下对应的解决办法，也希望对你有所帮助。

为什么要做图片的懒加载

假设在用户访问某个页面时就加载这个页面全部的图片(即使这些图片并不处在用户的当前的视窗中)，在弱网环境或者网速较慢的环境下，这些“冗余”图片的下载会占用用户本来就非常有限的带宽，伤害用户体验(比如影响其他资源的下载)。所以对于网站的图片，理想的做法是懒加载(按需加载)。

图片懒加载的原理

在浏览器内部对于各种资源有着一套自己的优先级定义，浏览器会优先加载优先级高的资源。 如果我们不去进行图片的懒加载，默认情况下，资源的priority如下。 这些优先级标记为high的图片会占用其他资源的下载带宽，可能会造成某些比较关键的资源(比如xhr call)加载缓慢，拖慢页面速度。

图片懒加载的简单实现

图片懒加载的思路一般时当页面加载时加载一个尺寸很小的占位图片(1kb以下)，然后再通过js选择性的去加载真正的图片。 一个最简单的的实现如下：

// index.css  img[src] {
           filter: blur(0.2em);  }  im