preload="none"不是强制禁令，而是提示浏览器跳过预加载，但Chrome等仍可能静默请求前几KB元数据；真正延迟加载需结合data-src、动态赋值src及显式调用load()。
preload="none" 并不能“彻底禁止”媒体数据在页面加载时被预请求，它只是向浏览器发出一个建议：不要自动加载媒体资源（如音频、视频）的任何数据，包括元数据（如时长、尺寸）、封面帧或音视频内容本身。
为什么 preload="none" 不是强制禁令
HTML5 规范明确指出：preload 是提示性属性（hint），不是指令。浏览器有权根据自身策略（如用户设置、网络条件、设备能力、是否启用节省流量模式）忽略该值。例如：
- Chrome 在某些版本中，即使设为
preload="none"，仍可能预取首帧缩略图或元数据以支持控件渲染； - Safari 可能为保证播放体验，在用户首次交互前就悄悄加载少量数据；
- 移动端浏览器在 4G/5G 网络下更倾向于主动加载，以减少点击后的等待感。
真正延迟加载媒体的实用组合方案
要最大程度避免初始加载时请求媒体，需配合以下措施：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
移除 src 属性：初始不设
src，改用data-src存储真实地址； -
动态注入 src：仅在用户明确意图操作（如点击播放按钮、滚动进入视口）时，再赋值
video.src = video.dataset.src； - 搭配 controls 和 muted（可选）：若媒体用于交互触发，可先隐藏原生控件，用自定义按钮控制加载与播放；
- 添加 crossorigin（如需跨域）：避免因 CORS 导致动态加载失败，影响后续脚本逻辑。
一个安全可靠的懒加载示例
HTML 结构：
JavaScript（轻量级）：
const video = document.querySelector('video');video.addEventListener('click', function() {
if (!this.src && this.dataset.src) {
this.src = this.dataset.src;
this.load(); // 显式调用 load() 确保元数据加载
}
});
额外注意事项
- preload="none" + autoplay 无效：两者语义冲突，浏览器会忽略 autoplay 或覆盖 preload；
- 服务端日志中仍可能看到 OPTIONS 或 HEAD 请求，这是浏览器预检行为，与 preload 无关；
- 若使用 Webpack/Vite 等构建工具，请确认媒体文件未被误打包进初始 chunk（检查
import()动态导入或 public 目录引用方式）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
