小技巧系列 - JS判断图片是否已经缓存

网站图片十分常用，尽可能让图片使用缓存，是一个提高页面效率的常见方法。那么页面如何判断图片是否已经缓存了呢？很简单，通过 HTMLImageElement.complete 属性就可以做到。

实现方式

const img = new Image();
img.src = 'xxx'; // 图片原地址
if (img.complete){
  // 已经加载
} else {
  // 还没加载
}

通过这种方式，可以快速判断图片是否已经缓存，并可以结合这个方法进行不同的后续处理。

原理

利用 HTMLImageElement.complete 属性得到。它是一个只读属性，如果图片已经在浏览器中加载完成，则返回 true，否则返回 false。

这个属性的判断来源有以下几点，符合任意一条就认为已经完成：

• src 和 srcset 属性都没有指定
• srcset 属性不存在，src 属性在指定时为空字符串
• 图像资源已经被完全取走，并被放入队列用于渲染
• image 元素之前已经确定该图像是完全可用的，可以随时使用
• 图像损坏，或者说是由于错误等原因导致的无法加载图像