JS использует для разных прокладок

Question

У меня проблема с моим сайтом. Элемент padding-top для div class = "row slide-content" действует странно. Для некоторых слайдов это около 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 // Append HTML «s, как 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

Это обыкновение происходить каждый раз, но иногда отступы между логотипом и верхней части страницы изменится. Надеюсь, я достаточно хорошо объяснил :)

Большое спасибо! Daan

Answer 1

Я запустил код с отладчиком и могу получить отступ до -8px. Я думаю, это связано с тем, что функция jQuery document.ready не дожидалась загрузки изображений, и поэтому ваш элемент li не имеет ожидаемой высоты.

Можете ли вы обернуть функцию jQuery в следующем коде, чтобы увидеть, ожидает ли до загрузки изображений проблемы?

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