在页面上完全绘制后，猫头鹰轮播上的回调

Callback on owl carousel AFTER fully drawn on page

本文关键字：猫头鹰 回调 绘制      更新时间：2023-09-26

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

$('#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事件是在轮播完全绘制到页面上之前触发的，因此高度不可靠。

通过延迟，我能够正确获得它。但这显然是一个黑客，我不能保证在较慢的设备上，轮播会及时被绘制。

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

示范小提琴

你可以使用 jQuery 的 get() 方法来抓取图像的高度（即使它们是隐藏的）。这与猫头鹰轮播无关，因此不必等待它完成加载！

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

浏览文档和演示，我发现了这个页面：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);
}

小提琴

虽然，我同意文档在解释事件流程方面并不擅长。这对我来说仍然像是一个黑客。

初始化轮播后，图像的 DOM 具有宽度，但在实际加载图像之前它们没有高度。尝试使用（宽度）*（纵横比）而不是高度。

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