0

我在让元素在页面加载时调整自身大小时遇到​​问题。它可以在调整浏览器视口大小（调整）时找到，但不能在页面加载时找到。页面加载后，元素的高度为 0px。

这是我的 jQuery 代码：

$(window).load(function () {
  var imgWidth = $(".flexslider li img").width();
  var imgHeight = $(".flexslider li img").height();
  $('.flex-caption-viewport').width(imgWidth).height(imgHeight)
});
$(window).resize(function() {
  var imgWidth = $(".flexslider li img").width();
  var imgHeight = $(".flexslider li img").height();
  $('.flex-caption-viewport').width(imgWidth).height(imgHeight)
});

您可以在我正在处理的主题中看到这个问题。

我尝试了很多东西，包括 .ready 函数，以及选择一个不同的元素来匹配大小。目标是让元素调整大小（响应）以匹配它覆盖的图像的大小。

4

2 回答 2

2

看起来高度在窗口加载时不可用。这可能是由于 flexslider 没有在窗口加载时完成初始化。加载页面后在控制台中运行$(".flex-viewport").height();以查看高度为零。我建议使用 flexslider 的 start api 回调。应该是这样的：

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
      animation: "slide",
      controlsContainer: ".flex-container",
      start: function(slider) {
        var imgWidth = $(".flexslider li img").width();
        var imgHeight = $(".flexslider li img").height();
        $('.flex-caption-viewport').width(imgWidth).height(imgHeight)
      }
    });
  });
</script>

我从 flexslider 网站的标题为“新的、强大的回调 API”的部分下得到了这个提示

于 2013-07-02T19:05:49.353 回答
1

您可以尝试触发 resize 事件，而不是调整您的 things 大小onload。

$(window).resize(function() {
  var imgWidth = $(".flexslider li img").width();
  var imgHeight = $(".flexslider li img").height();
  $('.flex-caption-viewport').width(imgWidth).height(imgHeight)
}).resize();

另一种方法应该是使用setTimeout：

setTimeout(function () {
    $(window).resize();
}, 100);
于 2013-07-02T19:00:45.580 回答