So ersetzen Sie ein Bild durch eine Div

Question

Ich habe ein Plugin, das ein AJAX-Ladebild erzeugt, wenn Sie auf die Schaltfläche submit klicken. Es wird von Wordpress Shortcode generiert und ist nicht direkt editierbar, es sei denn, ich gehe in die Plugin-Dateien und ändere sie. Aber das würde erfordern, dass ich es jedes Mal ändere, wenn das Plugin aktualisiert wird, was nicht ideal ist.

Ich hoffe, lieber, das Bild mit etwas zusätzlichen Code zu überschreiben.

Grundsätzlich würde ich dies gerne ersetzen:

<img class="ajax-loader" src="/ajax-loader.gif"> 

Mit einem viel besser aussehend CSS loading bar:

<div class="wrap go"><div class="loader bar"><div class="sfmgreen"></div><div class="dkblue"></div><div class="ltblue"></div><div class="aqua"></div></div> 

Gibt es einen Code kann ich die Plugin-Bild überschreibt verwenden, um und den Ersatz machen?

Answer 1

In HTML ist nichts wirklich verfügbar, um ein Element auf der Seite automatisch zu überschreiben. Sie müssen einfach finden es im DOM und ersetzen es. Das bedeutet, dass Sie wissen müssen, wenn es ist vorhanden, so dass Sie eine Art von Auslöser für den Ersatz haben können.

Zum Beispiel funktioniert dies, wenn die Elemente unmittelbar nach dem Klicken auf die Schaltfläche "Senden" angezeigt werden.

document.querySelector('#some-submit-btn').addEventListener('click', function() { 
    var loaders = document.querySelectorAll('.ajax-loader'); 
    for (var i = 0; i < loaders.length; i++) { 
    var loader = loaders[i]; 
    var replacement = document.createElement('div'); 
    replacement.innerHTML = '<div class="wrap go"><div class="loader bar"><div class="sfmgreen"></div><div class="dkblue"></div><div class="ltblue"></div><div class="aqua"></div></div>'; 
    loader.parentElement.replaceChild(loader, replacement); 
    } 
}); 

... aber wenn diese Lader Bilder erst einige Zeit nicht da sind später, können Sie wie ein setTimeout diesen Code mit irgendeiner Art von Hack wickeln müssen.

In beiden Fällen kann es einen Blitz geben, während Sie das alte Ding sehen, bevor Ihr Ersatz vorhanden ist. Zum Umgehen dass versteckt vielleicht ist es mit CSS:

.ajax-loader { 
    display: none; 
} 

Zusammengefasst ist es wirklich nur gehen Hacky Möglichkeiten, um die Substitution zu tun; das Aktualisieren des Plugins ist der sauberste Weg dahin. Vielleicht können Sie dem Projekt einen benutzerdefinierten Loader-HTML-Code hinzufügen (wenn es sich um Open Source handelt), um zu vermeiden, dass das Plugin nach jedem Update aktualisiert werden muss.