DOMContentLoaded后移除图片loading="lazy"属性的脚本问题求助

云原生阿岚

2026-7-16

问题分析与解决方案

原脚本的问题

选择器错误：你用document.querySelectorAll("lazy")是在查找标签名为<lazy>的元素，但你的图片是给<img>标签加了loading="lazy"属性，正确的选择器应该是img[loading="lazy"]。
逻辑偏离需求：你原本要的是DOMContentLoaded触发后直接移除图片的loading="lazy"属性，强制加载剩余图片，但原脚本里的IntersectionObserver是另一种懒加载实现，和你的需求不匹配，而且就算选择器对了，也没执行移除属性的操作。

修正后的脚本

直接选中所有带loading="lazy"的图片，移除该属性即可：

window.addEventListener("DOMContentLoaded", (event) => {
  // 选中所有带有loading="lazy"的img元素
  const lazyImages = document.querySelectorAll('img[loading="lazy"]');
  lazyImages.forEach(img => {
    // 移除loading属性，浏览器会立即加载该图片
    img.removeAttribute('loading');
  });
});

更优实现思路

区分首屏与非首屏图片：首屏可见的图片不要加loading="lazy"，只给首屏外的图片加，这样DOMContentLoaded后需要处理的图片数量更少，进一步优化初始加载性能。

避免阻塞主线程：如果需要处理的图片数量较多，可以用requestIdleCallback延迟执行移除操作，不影响页面交互：

window.addEventListener("DOMContentLoaded", (event) => {
  requestIdleCallback(() => {
    const lazyImages = document.querySelectorAll('img[loading="lazy"]');
    lazyImages.forEach(img => img.removeAttribute('loading'));
  });
});