在页面上完全绘制后 owl 轮播回调

Question

假设您有一个位于页面绝对顶部的单个项目轮播。在此之下，您拥有其余内容。由于轮播嵌套在页面的任意深处，您已将其设置为绝对定位。但现在您需要知道轮播的高度，以便您可以在其余内容上放置一个顶部边距，使其不重叠。这就是我正在做的。

$('#carousel').owlCarousel({
  items: 1,
  onInitialized: adjustStretchHeader,
  onResized: adjustStretchHeader
});

function adjustStretchHeader () {
  setTimeout(function () {
    return $('.page > .container')
      .css('margin-top', $('.page > .stretch-header')
        .height() + 15);
  }, 250);
}

在旋转木马的初始化和调整大小事件中，我得到它来获取旋转木马的高度并更新上边距。问题是，没有延迟， initialized 事件在轮播完全绘制在页面上之前触发，因此高度不可靠。

由于延迟，我能够正确地获取它。但这显然是 hack，我不能保证在较慢的设备上，轮播会及时绘制。

我在 documentation 中看不到任何其他有用的事件。

Demonstration fiddle

Answer 1

查看文档和演示，我找到了这个页面：http://www.owlcarousel.owlgraphic.com/demos/events.html

它表明 onRefreshed 事件在 onInitialized 之后和图像加载之后被调用。你可以用那个。

$('#carousel').owlCarousel({
  items: 1,
  onRefreshed: adjustStretchHeader
});

function adjustStretchHeader () {
    return $('.page > .container')
      .css('margin-top', $('.page > .stretch-header')
        .height() + 15);
}

Fiddle

尽管如此，我同意文档在解释事件流程方面并不出色。这对我来说仍然感觉像是一个黑客。

Answer 2

您可以使用 jQuery 的 get() 方法获取图像的高度（即使它们被隐藏）。这是独立于 owlCarousel 的，所以不必等待它完成加载！

var images = $('#carousel img');
var firstImgHeight = images.get(0).height;
$('.page > .container').css('margin-top', firstImgHeight + 15);

Answer 3

carousel 初始化后，图片的DOM 有宽度但没有高度，直到实际加载图片。尝试使用 (width)*(aspect ratio) 而不是 height.

function adjustStretchHeader() {
  return $('.page > .container')
    .css('margin-top', $('.page > .stretch-header')
      .width() * aspectratio + 15);
}

在页面上完全绘制后 owl 轮播回调

Callback on owl carousel AFTER fully drawn on page

javascript

jquery

owl-carousel-2