Ersetzen Sie MDL-Symbol Schriftart hamburgeur Symbol mit Svg

Question

Teilweise muss ich nicht warten, bis die gesamte Schriftart-Datei geladen wird, bevor Symbol angezeigt wird, und weil ich gelesen habe ein wenig discussion (Pro und Con) über die Verwendung von Svg anstelle von Icon-Fonts experimentiere ich mit der Verwendung einer SVG anstelle der nativen Symbolschrift für MDLs für die Schublade Material Design Lite mdl-navigation.

In kompatiblen Browsern fügen sie das Symbol mit dem folgenden Skript hinzu, das ich im Falle von Upgrades nicht ändern möchte.

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... 
} 

Ich kam mit diesem:

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>'; 

jedoch '.mdl-layout__drawer-button' nicht existiert, bis der MDL-Skript ausgeführt wird, so ist Hinzufügen eines 500ms Timeout wie in this fiddle gesehen.

Ist mein Ansatz sinnvoll? Es gibt eine zuverlässigere Möglichkeit, um meine Funktion einmal auszuführen, nachdem der MDL-Code ausgeführt wurde?

UPDATE:

eine etwas andere Methode versucht nun, eine rekursive Funktion mit einem Test für .mdl-layout__drawer-button nicht sein null mit:

//Replace MDL icon with our sprite 
function mdl_drawer_btn() { 
    var mdl_drawer_button = document.querySelector('.mdl-layout__drawer-button'); 
    if (mdl_drawer_button != null) { 
     mdl_drawer_button.innerHTML = '<svg viewBox="0 0 100 100" class="icon nav-icon"><use xlink:href="#nav-icon"></use></svg>'; 
     } else { 
     setTimeout(mdl_drawer_btn, 100); 
     } 
    } 

setTimeout(mdl_drawer_btn, 100); 

Answer 1

Es ist schwer, ohne zu raten zu wissen, wie Ihre gesamte Website implementiert ist, aber Ich hätte gedacht, es sollte reichen, um dein Skript als letztes Skript auf die Seite zu setzen. Um sicherzustellen, dass alle DOM-Änderungen, die zuvor vorgenommen wurden, abgeschlossen sind, müssen Sie sie in ein 0ms-Zeitlimit umwandeln.

setTimeout(mdl_drawer_btn, 0);