Question

部分所以我不必等待整个字体文件在图标显示之前加载，因为我已经阅读了一些关于使用svg而不是icon-的discussion（pro和con）我正在尝试使用svg而不是Material Design Lite if(variable == frm.Handle)抽屉的MDL本机图标字体。

在兼容的浏览器上，他们使用以下脚本添加图标，如果升级，我不想修改。

mdl-navigation

我想出了这个：

if (this.drawer_) {
    var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
    if (!drawerButton) {
        drawerButton = document.createElement('div');
        drawerButton.setAttribute('aria-expanded', 'false');
        drawerButton.setAttribute('role', 'button');
        drawerButton.setAttribute('tabindex', '0');
        drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
        var drawerButtonIcon = document.createElement('i');
        drawerButtonIcon.classList.add(this.CssClasses_.ICON);
        drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON;
        drawerButton.appendChild(drawerButtonIcon);
    } # etc...
}

但是，在MDL脚本运行之前，var mdl_drawer_button = document.querySelector('.mdl-layout__drawer-button'); mdl_drawer_button.innerHTML = '<svg viewBox="0 0 100 100" class="icon nav-icon"><use xlink:href="#nav-icon"></use></svg>';不存在，因此我在this fiddle中添加了500毫秒的超时。

我的方法有意义吗？一旦MDL代码运行，运行我的函数会有更可靠的方法吗？

更新：

现在使用递归函数尝试稍微不同的方法，其中'.mdl-layout__drawer-button'的测试不为null：

.mdl-layout__drawer-button

Answer 1

如果不知道你的整个网站是如何实现的，很难建议，但我认为将你的脚本作为页面上的最后一个脚本就足够了。然后确保所有DOM更改（先前脚本已完成）完成，将其包装在0ms超时。

setTimeout(mdl_drawer_btn, 0);

用svg替换MDL图标字体hamburgeur图标

1 个答案: