Is there an event or an other method that tells me the preview is loaded?

Question

I'm working on a Plugin for the WordPress Customizer and need to call a function when the previewer has loaded. Is there an event or an other method that tells me the preview is loaded?

If have tried:

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

I've also tried wp.customizer.bind('refresh', function (){

Is there no event that gets fired when the preview is loaded? The refresh event gets fired when the previewer gets refreshed.

Any ideas?

Answer 1

Yes, this is the way to detect when the preview has loaded:

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

This JS code should be enqueued at the customize_controls_enqueue_scripts action with customize-controls script as its dependency.

Answer 2

I haven't found an Customizer API event for when the preview has loaded. Here is a solution with the on load event on the 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);  
}