web-dev-qa-db-ja.com

カスタマイザが変更を行っているときに「ロード中」の通知を追加する

私は本当に変更を加えたときにWordpressカスタマイザにオーバーレイと「ロード中」の通知を追加してみたいと思います。

カスタマイザを通じて行われた私の大きなテーマ変更のいくつかについては、私はリフレッシュ（デフォルト）トランスポートモードを使用しています。しかし、私のユーザーエクスペリエンスを向上させるためには、変更がロードされているという何らかの通知が必要だと思います。

いくつかのjqueryをカスタマイザにロードしてちょっとした回避策を試してみました。変更を加えたときに気付いたのです。 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);

このコードはここでオーバーレイを追加します - しかしそれを削除しません。

theme-customizer
3
Sam Skirrow

これは完璧な解決策ではないかもしれませんが、これはうまくいくはずです。このように、プレビューiframeに対してチェックする間隔を設定できます。

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);
3
Ram Ratan Maurya

私はこの単純なプロセスを使います。

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
}

ここでは.custom_loadingクラスでローディングアイコンを背景として設定できます：background: url(../path/to/loading/image) center center no-repeat;

それは動作するはずです:)

編集：アニメーションのロードを作成するために、ロード中のdivにcss3 animationおよびtransitionプロパティを追加することもできます。

0
Ashok Kumar Nath