如何延迟加载css中给出的svg图像？答案

【问题标题】：How to lazyload svg image given in css?如何延迟加载css中给出的svg图像？
【发布时间】：2016-05-15 04:42:31
【问题描述】：

首先我怀疑图像的延迟加载：

图片的LazyLoading是指在运行时在dom中加载图片还是在运行时从源中获取图片并加载？

第二个问题

我在标签中有很多延迟加载图像的示例。但是对于以下使用 svg sprite 图像的场景，是否有可用的示例。

我有通过 css 使用的带有 svg 图像的 html 页面，如下所示： HTML

<i class="svg-icon svg-icon-twitter"></i>

CSS

.svg-icon-twitter {
background: url("//localhost:3000/assets/sprite-footer.svg") 0 54.54545% no-repeat;
width: 24px;
height: 24px;
}
.svg-icon, .svg-logo {
  display: inline-block;
}

【问题讨论】：

标签： javascript jquery html css svg

【解决方案1】：

$("#some_id").addClass("svg-icon-twitter")

只有在你添加类的那一刻，css中的图片才会开始加载。

【讨论】：

我怀疑在加载 css 或 dom 加载上述类时会发生图像获取？
打开你的 javascript 控制台的网络标签并亲自查看
感谢您的澄清。它是在加载 dom 时获取的。

【解决方案2】：

为此，我将：

将定义精灵样式的 CSS 分隔在不同的文件中。
异步加载。

您可以在页面加载后通过 JavaScript 添加链接元素来处理异步加载：

var link = document.createElement('link');
link.href = 'sprite.css';
link.rel = 'stylesheet';
link.type = 'text/css';
// Temporarily set media to something inapplicable to ensure it'll fetch without blocking render
link.media = 'only x';
// Set the media back when the stylesheet loads
link.onload = function() {link.media = 'all'}
document.getElementsByTagName('head')[0].appendChild(link);

来源https://stackoverflow.com/a/32614409/1978945

您也可以使用loadCSS 之类的库。

【讨论】：