HTML滚动加载图片触发onerror循环如何修复-html教程-PHP中文网

onerror死循环根本原因是备用图再次加载失败且未切断事件，必须赋值后立即执行this.onerror=null或removeEventListener，并用base64 SVG确保兜底资源100%可达。

html滚动加载图片触发onerror循环如何修复

滚动加载图片时触发 onerror 死循环，根本不是“加载时机没控制好”，而是备用图路径再次失败后事件未切断——只要 this.onerror 没在赋值后立刻设为 null，浏览器就会无限重试，主线程卡死、内存飙升是必然结果。

滚动加载中 onerror 为什么总卡死？

懒加载（如 loading="lazy" 或 IntersectionObserver 触发）本身不干扰 onerror，但常见错误集中在三处：

先插入再绑定 onerror：DOM 插入瞬间就可能触发加载失败，监听器根本来不及注册
备用图用相对路径（如 ./fallback.png）：滚动加载常发生在子路由或 iframe 中，base URL 解析后实际请求 404
重复渲染列表时复用 DOM 节点：Vue/React 的 diff 过程会清空 dataset，导致已降级的图片再次进入 onerror 回调

动态创建 img 元素必须提前绑定 error 事件

滚动加载本质是 JS 动态插入，内联 onerror 属性在字符串拼接或框架 v-html 中基本失效（this 指向 window），唯一可靠方式是 addEventListener，且顺序不能错：

必须在设置 src 之前绑定事件：否则首次失败直接错过
回调里第一句就得清空 src：img.src = ''，否则浏览器可能从缓存读取 404 响应，不发新请求
替换后必须立即移除监听器：img.removeEventListener('error', handler)，否则 fallback 图再失败会二次触发
别用匿名函数：img.addEventListener('error', () => { ... })，无法移除，只能靠 data-handled 标记跳过

示例写法：

function handleImgError(e) {
  const img = e.target;
  if (img.dataset.handled === '1') return;
  img.dataset.handled = '1';
  img.src = '';
  img.src = 'data:image/svg+xml,%3Csvg width=%2220%22 height=%2220%22%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%228%22 fill=%22%23eee%22/%3E%3C/svg%3E';
  img.removeEventListener('error', handleImgError);
}

const img = document.createElement('img');
img.src = 'user-avatar.webp'; // 滚动时才赋值
img.addEventListener('error', handleImgError);
container.appendChild(img); // 必须在 appendChild 前绑定

滚动列表中如何防重复降级和漏绑？

列表滚动常伴随虚拟滚动、分页或 React/Vue 的 key 变更，容易出现两种极端：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载