object标签不支持loading属性或内置加载动画，必须手动叠加css遮罩层实现加载状态，且pdf加载完成无法可靠监听，需依赖轮询、超时兜底或iframe替代方案。
object标签本身不支持loading属性或内置等待动画
HTML <object></object> 标签没有 loading 属性，也不触发 onload 事件（现代浏览器中几乎从不触发），更不会自动显示任何加载状态。你看到的“加载中”效果，必须由开发者手动叠加一层遮罩层实现——这不是 object 的功能缺陷，而是它的设计定位决定的：它只是内容容器，不是资源加载器。
常见错误是给 <object></object> 直接加 class="loading" 或监听 onload，结果动画永远不消失，控制台也无报错——因为事件根本没注册成功。
用绝对定位遮罩层 + CSS骨架动画覆盖object
最可靠的做法是把 <object></object> 包在一个 position: relative 容器里，再插入一个同尺寸的遮罩层，用 @keyframes 做流光扫过效果：
- 遮罩层必须用
position: absolute、top: 0、left: 0、width: 100%、height: 100%精确贴合 object 尺寸 - 背景用
linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent)，background-size: 200% 100%，配合background-position动画模拟扫描光效 - 不要用
opacity动画或visibility切换——它们无法表达“正在加载”的节奏感；流光位移才是用户认知里的标准加载信号 - 遮罩层需设
pointer-events: none，否则会拦截 object 内部的点击或 PDF 工具栏操作
示例关键 CSS：
.object-container {
position: relative;
width: 800px;
height: 600px;
}
.object-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
background-size: 200% 100%;
animation: loading-shimmer 1.8s infinite;
pointer-events: none;
}
@keyframes loading-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
PDF加载完成时如何安全移除遮罩
PDF 是 <object></object> 当前唯一可依赖的用途，但它不提供 JS 可监听的加载完成信号。你不能靠 objectEl.onload 或 objectEl.contentDocument 判断——这些在多数浏览器中为 null 或抛错。
可行方案只有两种，且都带妥协：
-
轮询检测：定时检查
objectEl.contentDocument?.readyState === 'complete'，但仅对同源 PDF 有效；跨域 PDF 返回null，轮询无效 -
超时兜底 + 用户反馈：设 3–5 秒固定 timeout，到时自动隐藏遮罩，并显示“PDF 可能正在加载，请稍候”提示；同时监听
window.addEventListener('message', ...)（如果 PDF 页面主动 postMessage）
别用 display: none 隐藏遮罩层——动画仍后台运行；应调用 loadingEl.remove() 彻底销毁节点，避免单页应用反复进入时内存泄漏。
为什么不用iframe替代object做PDF加载
可以，而且更推荐。iframe 支持 onload、onerror，能准确捕获加载完成或失败，且 fallback 更可控。但要注意：
- iframe 加载 PDF 时，部分浏览器（如 Safari）会直接下载而非内嵌，除非服务端返回正确的
Content-Type: application/pdf和Content-Disposition: inline - 若必须用
<object></object>（比如旧系统强依赖typemustmatch或需要<param>传参），遮罩层就是唯一现实选择 - 所有方案都无法绕过服务端配置：PDF 路径必须可访问、CORS 允许、MIME 类型正确——前端动画再漂亮，后端配错一行 header，遮罩就会永远转下去
真正容易被忽略的点是：遮罩动画的持续时间，不该由“你觉得多久合适”决定，而应和后端接口的 P95 响应时间对齐。设成 1.8s 却等 4 秒才加载完，用户第一反应不是“还在加载”，而是“卡了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
