【发布时间】：2015-12-26 02:30:03
【问题描述】：
您好，我正在尝试制作幻灯片以用于我的 Wordpress 主题。主题使用了损坏的 owl carousel 2 滑块，所以我选择用 unslider 替换它，它工作正常，除了滑块 divs 在页面完全加载之前大量显示在彼此上方。
我试图隐藏滑块直到页面完全加载，但我的代码不起作用。
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 和 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>
【问题讨论】：
-
myslideri是元素的实际id吗？你能给我们看看 HTML 吗？ -
它的
getElementById不是getElementByID -
是的，我使用 getElementByID 但我没有在我的脚本上打错字。 @mariocatch 我将发布我的完整 HTML。
标签： javascript jquery css wordpress owl-carousel