HTML的object标签 预加载问题

Question

以下代码，会加载2张图片，object一次，picture一次
如何修改，才能只加载一次

  <object data="https://www.404z.cn/images/about.svg" style="max-width:100%;">
    <picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://www.404z.cn/images/about.dark.svg">
      <img alt="About" src="https://www.404z.cn/images/about.light.svg">
    </picture>
  </object>

为什么要这样写，想实现在md文档中嵌入带夜间模式的svg图片
about.svg可以实现夜间模式切换，但是在img标签中无效
如果不支持object标签，再加载内部内容

Answer 1

要让这段代码只加载一次，可以将 object 标签和 picture 标签改为 img 标签，并通过 data-src 和 srcset 属性分别指定图片的地址和多种图片环境下的地址，这样在加载时就会根据不同环境选择相应的图片，并不会重复加载两次。

修改后的代码如下所示：

<img alt="About" data-src="https://www.404z.cn/images/about.svg" 
  srcset="https://www.404z.cn/images/about.dark.svg" media="(prefers-color-scheme: dark)">
<img alt="About" data-src="https://www.404z.cn/images/about.svg" 
  srcset="https://www.404z.cn/images/about.light.svg" media="(prefers-color-scheme: light)">

需要注意的是，现代浏览器已经可以自动识别 prefers-color-scheme 属性，因此无需使用 picture 标签进行判断，在 img 标签的 srcset 属性中直接指定对应方法即可。同时，也可以将 data-src 属性改为 src，这样直接加载图片而不等到 DOM 加载完成时再加载。