我正在使用 Javascript 配置页面,以根据 JSON 数据选择和注入不同的图标。有时,在页面刷新之前,一个或多个注入的图标不会出现。我发现 Firefox 在所有图标上都失败了,但 Chrome 刷新后就可以了。
如果我检查 DOM,我可以看到 HTML 中缺少的元素为
<i id="live-icon" class="fas fa-check fa-2x"></i>
而工作元素显示为
<svg id="airdrop-icon" class="svg-inline--fa fa-times-circle fa-w-16 fa-2x" aria-hidden="true" data-prefix="fas" data-icon="times-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>
<!-- <i id="airdrop-icon" class="fas fa-times-circle fa-2x"></i> -->
所以看起来我的 DOM 注入有效,但 font-awesome 并没有将它扩展到 svg。这是一个可能的时间问题吗?
我已经尝试使用 font-awesome(js 和 css)的 CDN 版本和本地版本来查看这是否可能是问题所在,但事实并非如此。
Javascript 片段
const liveIcon = 'fas fa-check fa-2x';
const notLiveIcon = 'fas fa-times-circle fa-2x';
const liveColor = 'green';
const notLiveColor = 'red'
function SetElementIconById(id, icon) {
const i = document.getElementById(id);
i.setAttribute('class', icon);
}
function SetElementColorById(id, color) {
const span = document.getElementById(id);
const bg = document.getElementById(id);
bg.setAttribute('class', bg.getAttribute('class') + ' ' + color);
}
document.addEventListener("DOMContentLoaded", function(event) {
SetElementColorById('live-color', liveColor);
SetElementColorById('live-body-color', liveColor + " darken-2")
SetElementIconById('live-icon', liveIcon);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Live -->
<div class="col s12 m6 l4">
<div id="live-color" class="card white-text hoverable tooltipped center-align" data-position="top" data-delay="50" data-tooltip="Live date">
<div class="card-content vtiny">
<h5 style="font-weight: 300"><i class="fas fa-heartbeat fa-sm"></i> Live</h5>
</div>
<div id="live-body-color" class="card-content vtiny">
<p><i id="live-icon"></i></p>
</div>
</div>
</div>