Question

您好，我正在尝试制作幻灯片，以便使用我的Wordpress主题。该主题使用了破碎的猫头鹰轮播2滑块，因此我选择将其替换为unslider，但工作正常，除了滑块div在页面完全加载之前大量显示在彼此之上。

我试图隐藏滑块，直到页面完全加载，但我的代码不起作用。

CSS

<style  type="text/css">
  #myslideri{ visibility:hidden;}
</style>

JS

<script type="text/javascript"> 
function loadF() {
  document.getElementByID('myslideri').style.visibility='visible';     
} 
</script>

标记

<body <?php body_class(); ?> onload="loadF() ">
...
</body>

主题使用bootstrap JS CSS框架和Owl Carousel 2.即使我试图隐藏另一个div，但onload函数无法使用display="none"

以下是CSS＆amp;的完整列表加载主题的JS文件：

<script type='text/javascript' src='http://wp.example.com/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
<script type='text/javascript' src='http://wp.example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<link rel='https://api.w.org/' href='http://wp.example.com/wp-json/' />
.....
<script type='text/javascript' src='http://wp.example.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script>
<script type='text/javascript' src='http://wp.example.com/wp-content/themes/new-theme/assets/js/app.js?ver=20141212'></script>
<script type='text/javascript' src='http://wp.example.com/wp-includes/js/wp-embed.min.js?ver=4.4'></script>
<script type='text/javascript' src='http://wp.example.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.3.1'></script>
<script type='text/javascript' src='http://wp.example.com/wp-content/plugins/bootstrap-for-contact-form-7/assets/scripts.min.js?ver=1.3.0'></script>
<script type='text/javascript' src='http://wp.example.com/wp-content/themes/new-theme/assets/libs/bootstrap/dist/js/bootstrap.js?ver=20141212'></script>
<script type='text/javascript' src='http://wp.example.com/wp-content/themes/new-theme/assets/libs/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js?ver=20141212'></script>
<script type='text/javascript' src='http://wp.example.com/wp-content/themes/new-theme/assets/libs/owl.carousel/dist/owl.carousel.min.js?ver=20141212'></script>
<script type='text/javascript' src='http://wp.example.com/wp-content/themes/new-theme/assets/libs/FlexSlider/jquery.flexslider-min.js?ver=20141212'></script>
<script type='text/javascript' src='http://wp.example.com/wp-content/themes/new-theme/assets/libs/fancybox/jquery.fancybox.js?ver=20141212'></script>
<script type='text/javascript' src='http://wp.example.com/wp-content/themes/new-theme/assets/libs/mixitup/src/jquery.mixitup.js?ver=20141212'></script>
<script type='text/javascript' src='http://wp.example.com/wp-content/themes/new-theme/assets/libs/scrollreveal/dist/scrollReveal.js?ver=20141212'></script>

Answer 1

您应该使用getElementById而不是getElementByID。这就是问题所在。

在完全加载DOM之前隐藏父元素

1 个答案: