修身养性,知行合一

  • 首页
  • 爱码
    • 系统
    • 数据库
    • JavaScript
    • CSharp
    • Python
  • 生活
    • 文化
    • 美食
  • 杂谈
  • 关于
修身养性,知行合一
码字,杂谈
  1. 首页
  2. 爱码
  3. 前端
  4. JavaScript
  5. 正文

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

2022年2月14日 272点热度 0人点赞 0条评论

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

实现方式

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

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

原理

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

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

  • src 和 srcset 属性都没有指定
  • srcset 属性不存在,src 属性在指定时为空字符串
  • 图像资源已经被完全取走,并被放入队列用于渲染
  • image 元素之前已经确定该图像是完全可用的,可以随时使用
  • 图像损坏,或者说是由于错误等原因导致的无法加载图像
本作品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
标签: JavaScript
最后更新:2022年2月14日

jeremyjone

这个人很懒,什么都没留下

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

文章目录
  • 实现方式
  • 原理
最新 热点 随机
最新 热点 随机
js 问号链以及双问号的打包问题 关于 git unsafe repository 的错误 美化 Windows Terminal(升级版) win10 修改本地账户名称 小技巧系列 - JS判断图片是否已经缓存 推荐一波起始页吧
关于 git unsafe repository 的错误js 问号链以及双问号的打包问题
TypeError: ObjectId('') is not JSON serializable 如何突破.NET Core 2.2的上传大小限制 充分利用公网 -- 将联通光猫设置为桥接 JavaScript 之 canvas(三)-- 使用鼠标实时绘制图形 fetch的二次封装 IdentityServer4深入使用(一)-- 认证与授权(上)

(っ•̀ω•́)っ✎⁾⁾ 开心每一天

COPYRIGHT © 2021 jeremyjone.com. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

京ICP备19012859号-1

京公网安备 11010802028585号