如何使用MutationObserver()或类似方法监视div项位置的变化?

时间:2015-10-13 07:04:04

标签: javascript jquery html css mutation-observers

我正在使用JQuery.cycle2来循环浏览<div>中的图片。它提供的自定义样式属性之一是使用此自定义<div>属性将图像置于<div>区域中心的能力:

data-cycle-center-horz="true"

<div>id="cycle-slideshow",最初设置为style="visibility:hidden",以便在执行其他必要操作之前不会显示幻灯片。

为了显示幻灯片,我使用:

$('#cycle-slideshow').css({'visibility': 'visible'});

...有一个问题:它在中心生效之前捕捉到<div>容器中左对齐的图像,这通常是一毫秒之后,但足以引起注意,产生“闪烁”从左到中的图像。此后,幻灯片放映被设置,所有后续图像都以<div>为中心。因此,初始图像的显示就是问题所在:它应该被视为已经居中,所有后续图像都是如此(因为自定义居中在被要求显示时已经生效)。

我发现的最接近的解决方法是使用以下方法将第一张图像的初始位置捕获到变量:

$('#cycle-slideshow').offset().left;

...然后在例程中稍后将其再次捕获到另一个变量;如果定心已经发生,则值将不同,并且可以安全地显示内容。

但是这需要的时间比它应该的要长,有时时间不对。我需要在 <div> data-cycle-center-horz="true"的自定义JQuery.Cycle2属性之后显示MutationObserver() ,并且无法预测该时间,因此在何处放置可见性命令未知。 (我试过回调无济于事。)

我看到$('#cycle-slideshow').offset().left可以主要跟踪DOM的元素的添加和减少,但也许可以用来感知$('#cycle-slideshow').offset().left属性的变化,这是唯一的属性变化将表明图像的新中心位置实际上已经建立。

我需要通过监视函数/监听器/ JQuery中的某些东西来设计一种方法,但我不确定如何继续。如何“监听”从$('#cycle-slideshow').css({'visibility': 'visible'})的初始值到新值的更改,无论它何时发生,然后执行Interface Web Service

0 个答案:

没有答案