Question

我遇到了在页面加载时调整元素大小的问题。它可以在浏览器视口调整大小（它调整）时查找，但不会在页面加载时查找。在页面加载时，元素的高度为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)
});

您可以使用我正在处理HERE的主题来查看问题。

我尝试过很多东西，包括.ready函数，并选择一个与大小匹配的不同元素。目标是让元素调整大小（响应）以匹配叠加图像的大小。

Answer 1

看起来高度在窗口加载时不可用。这可能是因为flexslider没有在窗口加载时进行初始化。加载页面后在控制台中运行$(".flex-viewport").height();以查看高度为零。我建议使用flex apl的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网站here的标题为“新的，强大的回调API”的部分得到了这个提示

Answer 2

您可以尝试触发调整大小事件，而不是调整您的事物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);

jQuery：元素未在页面加载时调整大小

2 个答案: