您需要将代码放在子主题中，否则对父主题的更新会将其删除。

您希望加载程序成为页面的一部分，因为浏览器首先加载文档，然后使用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/

在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>