web-dev-qa-db-ja.com

Wordpressサイト用プリローダー

高画像コンテンツを持つことになるWordpressサイトにプリローダーを追加したい場合は、コードをサイトの先頭に配置するのが最善でしょうか。

私は自分のlocalhostサイトで子のテーマを作成しましたが、hmtl/javascriptを配置するのに最適な場所がどこにあるのかわからないようです。 CSSへのリンクはとにかくサイトの中にあるのでCSSについてはあまり理解していないので、CSSを子テーマのstyle.cssファイルに入れることができます。

私が自分の子供のテーマのJSファイルにそのJSを入れても、それが正しく機能するようにはならないでしょう。

どんな助けでも素晴らしいでしょう

ありがとう

エミリー、

javascriptperformance
1
The Chewy

あなたは子テーマにコードを入れたくなるでしょう、さもなければ親テーマへの更新はそれを消去するでしょう。

ドキュメントがブラウザによって最初にロードされるときにローダーをページの一部にし、次にJavaScriptを使用してイメージのロードが完了したことを検出し、ローダーを削除します。

HTMLとJavaScriptの構造に関する詳細情報があるこれらのリソースを調べてください。

https://css-tricks.com/snippets/jquery/display-loading-graphic-until-page-fully-loaded/ /

https://stackoverflow.com/questions/11072759/display-a-loading-bar-before-the-entire-page-is-loaded

http://smallenvelop.com/display-loading-icon-page-loads-completely/ /

1
Miles Elliott

あなたのCSSファイルに以下のCSSを追加してください。

/** Body Overlay **/
body #load {
    display: block;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9901;
    opacity: 1;
    background-color: #FFFFFF;
    visibility: visible;
    -webkit-transition: all .35s ease-out;
    transition: all .35s ease-out;
}
body #load.loader-removed {
    opacity: 0;
    visibility: hidden;
}
.spinner-loader .load-wrap {
    background-image: url("images/loader.png");
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    width: 100%;
    height: 100%;
}

あなたのウェブサイトの開始タグの直後に以下のコードを追加してください。

<div id="load" class="spinner-loader"><div class="load-wrap"></div></div>
<script type="text/javascript">
    // Javascript function to display loader on page load
    document.addEventListener("DOMContentLoaded", function(event) {
        var $load = document.getElementById("load");
        var removeLoading = setTimeout(function() {
            $load.className += " loader-removed";
        }, 500);
    });
</script>

お役に立てれば..！！

0
dhirenpatel22