问题
I'm using JQuery.cycle2 to cycle through images in a <div>. One of the custom style properties it provides is the ability to center the image in the <div> area, using this custom <div> property:
data-cycle-center-horz="true"
The <div> has id="cycle-slideshow" and is initially set to style="visibility:hidden" so that the slideshow will not be revealed until other necessary actions are performed.
To visibilize the slideshow, I use:
$('#cycle-slideshow').css({'visibility': 'visible'});
...which has one problem: it catches the image left-aligned in the <div> container before the centering is effected, which usually is a millisecond later, but enough to be noticeable, producing a "flashing" of the image from left to center. Thereafter the slideshow is set, and all subsequent images are centered in the <div>. So, it's the display of the initial image that's the problem: it should be visibilized already centered, as are all subsequent images (because the custom centering has been effected when they are called for display).
The closest workaround I've found is capture to a variable the initial location of the first image with:
$('#cycle-slideshow').offset().left;
...and then capture it again to another variable later in the routine; if the centering has taken place, then the values will be different, and its safe to make the content visible.
But this takes longer than it should, and sometimes the timing isn't right. I need to visibilize the <div> after the custom data-cycle-center-horz="true" property of JQuery.Cycle2 has been realized, and that time can't be predicted, so where to place the visibilization command is unknown. (I've tried callbacks to no avail.)
I see that MutationObserver() is available to track principally additions and subtractions of elements to the DOM, but perhaps could be used to sense when the there's a change in the $('#cycle-slideshow').offset().left property, which is the only property change that will signal that the image's new, centered position has in fact been established.
I need to devise a way to do this through a monitoring function/listener/something in JQuery, but I'm unsure how to proceed. How do I "listen" for a change from the initial value of $('#cycle-slideshow').offset().left to a new value, regardless of when it occurs and then perform $('#cycle-slideshow').css({'visibility': 'visible'})?
来源：https://stackoverflow.com/questions/33096188/how-to-use-mutationobserver-or-similar-to-monitor-change-in-location-of-div-it