web-dev-qa-db-fra.com

Existe-t-il un événement ou une autre méthode qui m'indique que l'aperçu est chargé?

Je travaille sur un plugin pour le personnalisateur WordPress et j'ai besoin d'appeler une fonction une fois le programme de prévisualisation chargé. Existe-t-il un événement ou une autre méthode qui m'indique que l'aperçu est chargé?

Si j'ai essayé:

jQuery(window).load (function() { // Customizer loaded...
   wp.customize.previewer.bind( 'refresh', function() { // doesn't seem to work ?!
      alert ('Previewer has loaded'); 
   }
}

J'ai aussi essayé wp.customizer.bind('refresh', function (){

N'y a-t-il aucun événement qui se déclenche lorsque l'aperçu est chargé? L'événement d'actualisation est déclenché lorsque l'aperçu est actualisé.

Des idées?

plugin-developmentjqueryjavascripttheme-customizer
1
Milli

Oui, voici le moyen de détecter le chargement de l'aperçu:

wp.customize.bind( 'ready', function() {
  wp.customize.previewer.bind( 'ready', function( message ) {
     console.info( 'Preview is loaded' );
  } );
} );

Ce code JS doit être mis en file d'attente à l'action customize_controls_enqueue_scripts avec le script customize-controls comme dépendance.

0
Weston Ruter

Je n'ai pas trouvé d'événement d'API Customizer lorsque l'aperçu a été chargé. Voici une solution avec l'événement on load sur l'iframe:

// Assures that the code gets runned once per load.
var code_has_run = false;

function preview_loader(){
    // When the customizer has loaded the iframe does not
    // exist yet. This checks if the iframe exists.

    if (jQuery('#customize-preview iframe').length > 0){    

        // When iframe/preview has loaded.
        jQuery('#customize-preview iframe').on('load', function (){

            // Wait a little until old frame is removed.
            setTimeout(function (){
                if (code_has_run == false){
                    // Code to be run when preview has loaded and is ready.
                    alert('Preview loaded');
                }
                code_has_run = true;

                // Wait until multiple load events are finished. 
                setTimeout(function(){
                    code_has_run = false;
                }, 1000);
            }, 1000);          
        });
    }
}

jQuery(window).load (function() { // Customizer loaded...

    //Call preview_loader if the preview loads under 500ms.
    preview_loader();

    setInterval(preview_loader, 500);  
}
0
Milli