Question

我正在将一系列图像动态渲染到容器中。最后，我希望单个图像居中，其他图像位于其左侧和右侧。

我的问题在于图像居中。我用我的整个代码制作了一个完整的fiddle，具有讽刺意味的是，正如我所期望的那样。但是在测试时我发现了

centered.width()

返回0而不是返回应居中的图像的宽度这里centered是我之前创建的图像标记。

最让我困惑的是它是如何在小提琴中起作用的，而不是当我测试它在本地打开网站时，在那里有完全相同的代码，而不是小提琴。

这是我目前拥有的整个页面。

＆＃13;

var ashe = JSON.parse('{"id":22,"key":"Ashe","name":"Ashe","title":"the Frost Archer","skins":[{"id":22000,"name":"default","num":0},{"id":22001,"name":"Freljord Ashe","num":1},{"id":22002,"name":"Sherwood Forest Ashe","num":2},{"id":22003,"name":"Woad Ashe","num":3},{"id":22004,"name":"Queen Ashe","num":4},{"id":22005,"name":"Amethyst Ashe","num":5},{"id":22006,"name":"Heartseeker Ashe","num":6},{"id":22007,"name":"Marauder Ashe","num":7}]}');

var currentCha = ashe;

function displaySkins(cha) {
  //Clear the display.
  var $skinDisplay = $('#skinDisplay');
  var $skinSpinner = $('#skinSpinner');
  $skinDisplay.html('');
  $skinSpinner.html('');
  currentCha = cha;

  //Add small perviews to spinner
  cha.skins.forEach(function(skin) {
    var img = $('<img class="small-preview" src="http://ddragon.leagueoflegends.com/cdn/img/champion/loading/' + cha.key + '_' + skin.num + '.jpg">');
    $skinSpinner.append(img);
    skin.img = img;
  })

  spinTo(0);

}

function spinTo(index) {
  centered = currentCha.skins[index].img;
  var left = $('#skinSpinner').width() / 2 - centered.width();
  console.log(centered.width());
  centered.css('left', left);
}

displaySkins(ashe);

＆＃13;

#skinDisplay {
  width: 100%;
  height: 100%;
}
#skinSpinner {
  width: 500px;
  height: 200px;
  border: 1px solid black;
  perspective: 500px;
}
#skinSpinner .small-preview {
  position: absolute;
  display: block;
  height: 100%;
  width: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="overlay">
  <div id="skinDisplay">

  </div>
  <div id="skinSpinner">

  </div>
</div>

＆＃13;

Answer 1

将load checker绑定到spinTo函数：

    function spinTo(index) {
      centered = currentCha.skins[index].img;
      $(centered).bind('load', function(){
         var left = $('#skinSpinner').width() / 2 - centered.width();
         console.log(centered.width());
         centered.css('left', left);
      });
    }

Answer 2

好像你在加载它之前访问了你的DOM。

$( document ).ready(function(){ displaySkins(ashe); });

这将推迟执行脚本，直到加载DOM。

它适用于小提琴，因为它们将脚本包含在DOM的末尾。因此首先加载DOM并包含脚本并最终执行。你反过来做（这也很好）显然不起作用

先前创建的元素上的jQuery .width（）返回0

2 个答案: