我真的很想尝试在更改时向wordpress自定义程序添加一个覆盖和“加载”通知。

对于通过customizer进行的一些较大的主题更改，我使用刷新（默认）传输模式。然而，为了增加我的用户体验，我认为有必要发出某种通知，说明正在加载更改。

我已经尝试将几行jquery加载到定制器中，以进行一些变通，我注意到当您进行更改时，实际发生的情况是在预览中添加了一个附加的iframe，并删除了旧的iframe，因此我尝试了以下方法：

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

在加载iframe时，我还尝试了添加一个类，但没有成功：

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

我尝试了其他一些方法来检测iframe何时重新加载，但没有成功。所以我想我应该把它放在这里，看看是否还有其他人有什么好主意。

要明确的是，我想找到一种方法来添加一个“加载”通知，最好是在定制器中进行更改时添加一个覆盖div。

下面的答案帮助我在加载预览时添加了一个类。但是，我需要在加载预览时尝试添加一个覆盖div，然后在加载后将其删除。

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);

这里的代码将添加覆盖，但不会删除它。

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);

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
}