Question

我有一个图像滑块，div的左半部分显示图像，右半部分显示灰色背景的标题。由于我正在使用Bootstrap for UI，因此当寡妇改变时，图像会改变尺寸，所以我使用jQuery来正确保持字幕大小。这适用于localhost但不适用于我的暂存环境。

jQuery的：

jQuery(document).ready(function($) {
 //resizes carousel right side as window changes
 function size_carousel(){
    var height = $('.carousel-inner .item img:visible').height();
    console.log($('.carousel-inner .item img:visible').height());
    $('.carousel-caption').each(function(){
        $(this).height(height);
    });
 }
 $(window).resize(function() {
    size_carousel();
 });
 $('#myCarousel').ready(function(){
    size_carousel();
 });
});

HTML摘录：

<div id="myCarousel" class="carousel slide">
         <ol class="carousel-indicators">
                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                 <li data-target="#myCarousel" data-slide-to="1"></li>
                 <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
        <div class="carousel-inner">
          <div class="item active">
                <img src="<?php bloginfo('template_directory');?>/images/test/demo1.jpeg" class="span6"/>
                <div class="carousel-caption span6">
                        <h3 class="cat">Tech News</h3>
                        <h2 class="title">Article Title</h2>
                        <p class="dek well well-small">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.  Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div> <!-- /caption -->
          </div><!-- /item -->
    </div>

在刷新时，在localhost中，控制台显示正确的值（取决于窗口大小，其变化范围为2-300），而登台环境始终返回30，而与窗口大小无关。当您调整窗口大小时，它会返回正确的值并且标题会正确调整，因此唯一的问题是初始页面加载。

localhost是MAMP，并且staging是一个MediaTemple gs服务器，它们都具有相同的WordPress安装和jQuery版本，因此我很难隔离可能导致其行为不同的内容。

你可以看到它in action here。

Answer 1

改变这个：

$(window).resize(function() {
    size_carousel();
 });
 $('#myCarousel').ready(function(){  //ready event is only for document!
    size_carousel();
 });

对此：

$(window).on('resize load',function() {
    size_carousel();
 });

jQuery在某些环境中返回错误的图像高度值

1 个答案: