Fügen Sie einen Hinweis zum Laden hinzu, wenn Customizer Änderungen vornimmt

Ich möchte wirklich versuchen, ein Overlay hinzuzufügen und “Laden” Ankündigung zu dem WordPress-Customizer, wenn eine Änderung vorgenommen wird.

Für einige meiner größeren Designänderungen, die über den Customizer vorgenommen werden, verwende ich den Aktualisierungsmodus (Standard). Um jedoch meine Benutzererfahrung zu verbessern, denke ich, dass eine Art Hinweis darauf angebracht ist, dass die Änderung erforderlich ist.

Ich habe versucht, ein paar Zeilen von jquery in den Customizer zu laden, um ein bisschen zu arbeiten, bemerkte ich, wenn Sie eine Änderung vornehmen, was tatsächlich passiert ist, wird ein zusätzlicher iframe zur Vorschau mit der neuen Änderung und dem alten hinzugefügt Wenn iframe entfernt wird, habe ich Folgendes versucht:

if ($('#customize-preview').children().length = 2) { $('#customize-preview').addClass('loading'); } else { $('#customize-preview').removeClass('loading'); $('#customize-preview').addClass('loaded'); } 

Ohne Erfolg, habe ich auch versucht, eine class hinzuzufügen, als der Iframe geladen wurde:

 $('#customize-preview iframe').ready(function () { $('#customize-preview').addClass('loading'); $('#customize-preview').removeClass('loaded'); }); 

Ich habe ein paar andere Methoden ausprobiert, um zu erkennen, wenn der Iframe neu geladen wird, aber hatte keinen Erfolg. Also dachte ich, ich würde es hier rauslassen, um zu sehen, ob jemand anderes gute Ideen hat.

Um es klar zu stellen, möchte ich eine Möglichkeit finden, eine “Lade” -Meldung hinzuzufügen und idealerweise ein Overlay-Div, wenn eine Änderung im Customizer vorgenommen wird.

Die Antwort unten hat mir geholfen, eine class hinzuzufügen, wenn die Vorschau geladen wird. Allerdings muss ich versuchen, ein Overlay-Div hinzufügen, wenn die Vorschau geladen wird, und entfernen Sie es dann, sobald es geladen ist.

 setInterval(function(){ if( previewDiv.children('iframe').length > 1 ) { previewDiv.addClass('loading'); previewDiv.html('
'); } else{ previewDiv.removeClass('loading'); previewDiv.addClass('loaded'); previewDiv.remove('.loading-overlay'); } }, 100);

Dieser Code hier fügt das Overlay hinzu – wird es aber nicht entfernen.

Solutions Collecting From Web of "Fügen Sie einen Hinweis zum Laden hinzu, wenn Customizer Änderungen vornimmt"

Dies ist zwar keine perfekte Lösung, aber das sollte funktionieren. Sie können ein Intervall festlegen, das wie folgt auf den Vorschau-iFrame überprüft wird:

 var previewDiv = $('#customize-preview'); previewDiv.prepend('
'); var loadingOverlay = previewDiv.find('.loading-overlay'); setInterval(function(){ if( previewDiv.children('iframe').length > 1 ) { previewDiv.addClass('loading'); } else{ previewDiv.removeClass('loading'); previewDiv.addClass('loaded'); } }, 100);

Ich benutze diesen einfachen process:

 add_action( 'customize_controls_print_footer_scripts', 'add_loader' ); function add_loader() { ?>   < ?php } 

Hier in der class .custom_loading können Sie ein Ladesymbol als Hintergrund festlegen: background: url(../path/to/loading/image) center center no-repeat;

Es sollte funktionieren 🙂

Bearbeiten: Sie können auch die CSS3-Animation und die Übergangseigenschaft zum Lade-Div hinzufügen, um ein animiertes Laden durchzuführen.