如何在元素加载前应用样式，解决图片渲染前无样式闪烁问题

你使用的$(document).ready对应浏览器DOMContentLoaded事件，该事件触发时DOM树已经解析完成，浏览器已经启动首屏内容渲染和图片资源加载，此时再添加样式类已经晚于渲染时机，所以会出现短暂的无样式图片闪烁。

• 优先使用CSS直接注入，无需JS添加类
  这是性能最优、生效最早的方案。你可以直接在Chrome扩展的manifest.json中配置content script的CSS注入时机为document_start，CSS会在页面任何DOM解析、资源加载之前就注入全局生效，完全避免闪烁。
  示例manifest配置：

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["your-style.css"],
      "run_at": "document_start"
    }
  ]
}

你需要的预置样式直接写在your-style.css中即可，示例：

/* 图片加载前样式 */
img {
  filter: blur(8px);
  transition: filter 0.3s ease;
}
/* 背景图加载前样式 */
[style*="background-image"] {
  background-color: #eee;
}

• 需动态逻辑控制时使用MutationObserver
  如果必须通过JS做逻辑判断后再添加样式类，需要将注入的JS也设置run_at: "document_start"，不要监听任何DOM加载完成事件，改用MutationObserver监听DOM节点新增，在节点创建后、渲染前就添加样式类：

// 自定义加类逻辑
const addLoadStyleClass = (el) => {
  if (el.tagName === 'IMG') {
    el.classList.add('custom-img-preload')
  } else if (el.style?.backgroundImage) {
    el.classList.add('custom-bg-preload')
  }
}

// 监听整个文档的DOM节点新增
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType !== Node.ELEMENT_NODE) return
      // 处理当前新增节点
      addLoadStyleClass(node)
      // 处理当前节点的所有子节点
      node.querySelectorAll('img, [style*="background-image"]').forEach(addLoadStyleClass)
    })
  })
})

observer.observe(document.documentElement, {
  childList: true,
  subtree: true
})

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