修身养性,知行合一

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

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

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

网站图片十分常用,尽可能让图片使用缓存,是一个提高页面效率的常见方法。那么页面如何判断图片是否已经缓存了呢?很简单,通过 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

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

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

文章评论

  • test

    这个应该是用来判断图片是否加载完成吧,不是用来判断图片是否已经缓存吧

    2023年11月20日
    回复
    • jeremyjone

      @test 这个是跟浏览器有关系,一般现代浏览器都可以,IE不可以。一种比较取巧的方式而已

      2023年12月3日
      回复
  • 取消回复

    文章目录
    • 实现方式
    • 原理
    最新 热点 随机
    最新 热点 随机
    node-sass 的安装 解决端口被占的问题 vue3 组件 Props 的声明方式 给 div 添加选中状态 请求的取消 rgb 颜色小数兼容问题
    node-sass 的安装
    推荐一款 JS 水印工具 windows下添加右键菜单并打开文件 JavaScript异步加载图片 ASP 获取站点根目录 利用 pinia 添加局部 store 歌曲分享--爱得太迟

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

    COPYRIGHT © 2021 jeremyjone.com. ALL RIGHTS RESERVED.

    THEME KRATOS MADE BY VTROIS

    京ICP备19012859号-1

    京公网安备 11010802028585号