3

I really want to try and add an overlay and "loading" notice to the wordpress customizer when a change is made.

For some of my larger theme changes that are made through the customizer, I am using the refresh (default) transport mode. However, to increase my user experience, I think some kind of notice to say that the change is loading is necessary.

I've tried loading a few lines of jquery into the Customizer to do a bit of a work around, I noticed when you make a change, what is actually happening is an additional iframe is added to the preview with the new change and the old iframe is removed, so I tried this:

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

With no avail, I also tried this to add a class when the iframe was loaded:

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

I've tried a few other methods to detect when the iframe is reloading, but had no success. So I thought I'd put it out on here to see if anyone else had any bright ideas.

To be clear, I want to find a way to add a "loading" notice and ideally an overlay div when a change is being made in the Customizer.

Answer below has helped me add a class when the preview is loading. However I need to try and add a overlay div when the preview is loading, and then remove it once it has loaded.

setInterval(function(){
if( previewDiv.children('iframe').length > 1 ) {
    previewDiv.addClass('loading');
    previewDiv.html('<div class="loading-overlay"></div>');

} else{
    previewDiv.removeClass('loading');
    previewDiv.addClass('loaded');
    previewDiv.remove('.loading-overlay');
}
}, 100);

This code here will add the overlay - but won't remove it.

3
+50

While this might not a be the perfect solution but this should work. You can set an interval to check against the preview iframe, like this:

var previewDiv = $('#customize-preview');
previewDiv.prepend('<div class="loading-overlay"></div>');
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);
  • Just a quick follow up question. I'm now trying to add an overlay div when the class ".loading" is active. Using this code here but it won't remove it once the ".loading" class has gone. See edited code in my question. – Sam Skirrow Oct 21 '14 at 9:45
  • @SamSkirrow look at the updated code. After appending the loading overlay to the preview div, you can just use the CSS to toggle the visibility as it's parent has the loading class already, it would be easier to do it with CSS. – Ram Ratan Maurya Oct 21 '14 at 12:48
  • Brilliant, presumably by adding loadingOverlay.css('display','block'); and loadingOverlay.css('display','none'); in the right places then so I can toggle it's visabiltiy – Sam Skirrow Oct 21 '14 at 14:44
0

I use this simple process:

add_action( 'customize_controls_print_footer_scripts', 'add_loader' );

function add_loader() {
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        var loader = '<div class="custom_loading"/>';
        $( "body" ).append( loader );
    });
    </script>
    <style>
        .custom_loading{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 999999; display: none;}
        .saving .custom_loading{display: block}
    </style>
    <?php
}

Here in .custom_loading class you can set a loading icon as background: background: url(../path/to/loading/image) center center no-repeat;

It should work :)

Edit: You can also add css3 animation and transition property to the loading div to make an animated loading.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.