列表/标签/分页页首篇文章图片即时加载其余懒加载的JS脚本

完全可以通过JS脚本实现需求，以下是具体代码和说明：

核心JS脚本 #

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有loop-wrap容器（适配列表/标签/分页等多页面场景）
  const loopWraps = document.querySelectorAll('.loop-wrap');
  
  loopWraps.forEach(wrap => {
    // 获取当前容器下的所有文章卡片
    const postCards = wrap.querySelectorAll('.post-card');
    
    // 遍历卡片，区分首图和后续图片处理
    postCards.forEach((card, index) => {
      if (index === 0) {
        // 第一篇卡片：移除图片的loading="lazy"，确保首图即时加载
        const firstImg = card.querySelector('.featured-image img');
        firstImg && firstImg.removeAttribute('loading');
      } else {
        // 第二篇及之后的卡片：为图片添加loading="lazy"属性
        const imgs = card.querySelectorAll('.featured-image img');
        imgs.forEach(img => img.setAttribute('loading', 'lazy'));
      }
    });
  });
});

脚本逻辑说明 #

• 兼容多loop-wrap容器的布局场景，覆盖列表页、标签页、分页页的需求
• 针对每个容器内的文章卡片做精准处理：
  • 第一篇卡片：找到featured-image下的图片，移除loading属性，强制浏览器优先加载首图
  • 后续卡片：为对应图片添加原生懒加载属性，实现延迟加载优化
• 绑定DOMContentLoaded事件，确保脚本在DOM结构完全渲染后执行，避免出现元素找不到的问题

适配你的HTML结构细节 #

你的示例HTML中首图默认带有loading="lazy"，脚本会自动移除该属性；后续文章的图片无论原本是否有该属性，脚本都会统一添加上，完美匹配需求。

内容的提问来源于stack exchange，提问作者user20822651