javascript - JS 使用不同的填充

Question

我的网站有问题。 div class="row slide-content"的 padding-top 表现得很奇怪。 对于某些幻灯片，它约为 223 像素，而对于其他幻灯片，它使用不同的填充。

PHP

<div class="home-slider">
            <ul class="slides">

                <?php while ($slide =& $loop->next()): ?>

                    <li>
                        <div class="row slide-content">
                            <div class="large-10 large-centered columns text-center">                                                             
                                                      <?php if ( ! empty( $slide->button ) ) : ?>


                                        <div class="SLIDERLOGO"><?php echo $slide->button; ?> </div>


                                <?php endif; ?>


                                <?php if ( ! empty( $slide->ititle ) || ! empty( $slide->caption ) ) : ?>

                                    <div class="hero-title">
                                        <div class="large-3 columns nopad border-bottom"></div>
                                        <div class="large-6 columns text-center">

                                            <?php if ( ! empty( $slide->ititle ) ) : ?>

                                                <h4 class="text-white alt-h"><?php echo $slide->ititle; ?></h4>

                                            <?php endif; ?>

                                        </div>

                                        <?php if ( empty( $slide->ititle ) ) : ?>

                                                <div class="large-6 columns nopad border-bottom"></div>

                                        <?php endif; ?>

                                        <div class="large-3 columns nopad border-bottom"></div>
                                        <h1 class="text-white"><?php echo $slide->caption; ?></h1>
                                    </div><!--end of hero title-->

                                <?php endif; ?>



                            </div>
                        </div>

                        <img class="slider-bg" alt="<?php echo esc_attr( $slide->alt ); ?>" src="<?php echo esc_attr( $slide->img ); ?>" />
                    </li>

                <?php endwhile; ?>


            </ul>
        </div><!--end of Home slider-->

标志在这里插入

<?php echo $slide->button; ?>

两个标志的尺寸完全相同

JS //附加 HTML 作为幻灯片的 CSS 背景 //也使幻灯片的内容居中

jQuery('.home-slider .slides li').each(function () {

    var imgSrc = jQuery(this).children('.slider-bg').attr('src');
    jQuery(this).css('background', 'url("' + imgSrc + '")');
    jQuery(this).children('.slider-bg').remove();

    var slideHeight = jQuery(this).height();
    var contentHeight = jQuery(this).children('.slide-content').height();
    var padTop = (slideHeight / 2) - (contentHeight / 2);

    jQuery(this).children('.slide-content').css('padding-top', padTop);

});

这是我网站的链接 http://timberlife.nl

它不会每次都发生，但有时 Logo 和页面顶部之间的填充会发生变化。我希望我已经解释得足够好了:)

非常感谢! 大安

Answer 1

我已经在调试器打开的情况下运行了代码，并且可以将填充设置为 -8 像素。我认为这是因为 jQuery document.ready 函数不会等待图像下载，因此您的 li 元素没有您期望的高度。

您能否将您的 jQuery 函数包装在以下代码中，看看等到图像加载完毕是否可以解决问题？

$(window).bind("load", function() {
}