夸克浏览器懒加载“慢”的根本原因是过早触发加载且受资源排队或渲染阻塞影响，并非未加载；应通过 IntersectionObserver 精确控制触发时机、设置宽高防回流、配合 decoding="async" 和 fetchpriority="high" 优化解码与请求优先级。
夸克浏览器对
为什么 loading="lazy" 在夸克里看起来特别慢
夸克基于 Chromium，理论上应支持原生懒加载，但实测发现：
- 滚动距离阈值比 Chrome 更保守（可能提前 200–300px 就触发，但此时图片尚未进入视口，后续又被 layout 或 JS 阻塞）
- 图片解码和绘制被排在高优先级任务（如输入响应、动画帧）之后，尤其在低端安卓机上更明显
- 若页面存在大量未设置
width/height的
用 IntersectionObserver 替代原生 loading="lazy" 精确控制时机
绕过夸克对原生 lazy 的非标准调度，自己定义“真正进入视口前 150px 就开始加载”：
const io = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
if (img.dataset.src) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
io.unobserve(img);
}
}
});
}, {
rootMargin: '150px' // 提前加载，避免滚动快时白屏
});
document.querySelectorAll('img[data-src]').forEach(img => io.observe(img));
对应 HTML 写法：
立即学习“前端免费学习笔记（深入）”；
@@##@@
注意：width 和 height 必须写，否则 IntersectionObserver 触发后仍会回流。
配合 decoding="async" 和 fetchpriority="high" 优化解码与请求优先级
仅靠懒加载不够，还要告诉浏览器：“这张图很重要，解码别卡主线程，请求请插队”：
-
decoding="async"：让图片解码异步进行，不阻塞渲染 -
fetchpriority="high"：Chrome/夸克 115+ 支持，提升 fetch 队列优先级（对首屏内图片尤其有效）
示例：
@@##@@
⚠️ 注意：fetchpriority 对懒加载图片效果有限，建议只用于 isIntersecting === true 后赋值的图片（即真正要显示的那批），避免滥用拉低其他资源优先级。
避免常见坑：CSS、JS 和尺寸缺失的连锁拖慢
即使用了 IntersectionObserver，以下问题仍会让图片“加载完也不显示”：
- CSS 中对
opacity: 0或visibility: hidden，但没配transition或没手动触发重绘 - 父容器用了
contain: layout paint，导致图片加载后无法及时通知渲染层 - JS 动态插入图片时没同步设置
width/height，造成 layout 波动，浏览器推迟绘制 - 图片 URL 带查询参数（如
?v=1.2）但服务端没配缓存头，每次都被当成新资源重新下载
最稳妥做法：所有懒加载图片必须有明确宽高 + 使用 object-fit 控制缩放 + 服务端返回 Cache-Control: public, max-age=31536000。
真正卡住的往往不是“怎么加载”，而是“加载完能不能立刻画出来”。夸克的懒加载慢，多数时候是渲染链路被其他因素堵住了——先保尺寸、再控优先级、最后调触发点，比换库或加 polyfill 更直接有效。
