正文中的 OnLoad 不适用于 wordpress？答案

【问题标题】：OnLoad in body does not work with wordpress?正文中的 OnLoad 不适用于 wordpress？
【发布时间】：2019-03-23 09:33:35
【问题描述】：

Wordpress 网站，使用 Jquery 和 CSS 为内容 div 创建预加载器，我在这里找到了一个简单而伟大的网站：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
//A page can't be manipulated safely until the document is "ready."
var myVar;

function myFunction() {
  myVar = setTimeout(showPage, 3000);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("content").style.display = "block";
}
});
</script>

<style type="text/css">
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#content {
  display: none;
}
</style>

<body onload="myFunction()" style="margin:0;">

<div id="loader"></div>
<div id="content" class="site-content container clear">
Preload this text.
</div>

错误是： myFunction is not defined at onload ((index):420)

是否有针对 WordPress 的解决方法或其他简单的方法来为特定的 div id 添加预加载器？

【问题讨论】：

标签： php jquery wordpress

【解决方案1】：

您必须使用 wordpress 操作 wp_head 在页面标题中加载 javascript。把它放在你的孩子主题functions.php中：

function my_scripts() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function( $ ) {
            var myVar;

            function myFunction() {
                myVar = setTimeout(showPage, 3000);
            }

            function showPage() {
                document.getElementById("loader").style.display = "none";
                document.getElementById("content").style.display = "block";
            }
        });
    </script>
    <?php
}
add_action('wp_head', 'my_scripts');

编辑：只是为了清除-您不必在标头中加载所有javascript，但是您得到的错误是因为您在定义函数之前调用了该函数。因此，如果您将函数粘贴在 head 标签之间，它应该可以工作。

【讨论】：

我把它放在functions.php中你说的那样。仍然是同样的错误。我认为 wordpress 不喜欢这种使用方式
无赖 :-) 但我刚刚注意到，问题是因为您将代码粘贴到了 docment.ready 函数中。只需删除准备功能，它应该可以工作。我尝试过这个。 wordpress 没有做任何不同的事情，这会起作用。

【解决方案2】：

我认为在 WordPress 中使用 jQuery 有更好的方法：

    <script type="text/javascript">
      jQuery.noConflict()(function($){
           "use strict";

        $(document).ready(function() {
          //A page can't be manipulated safely until the document is "ready."
          var myVar;

          function myFunction() {
            myVar = setTimeout(showPage, 3000);
          }

          function showPage() {
            $("#loader").hide();
            $("#content").show();
          }
        });
      });
    </script>

【讨论】：