Question

我正在尝试编写自己的灯箱脚本，但我遇到了问题。

wrapper div居中通过position: absolute完成，顶部/左侧通过计算...

顶

_center_vertical = function() {
  return (($(window).height() - wrapper.height()) / 2) - (options.margin + options.border) + $(window).scrollTop()
}

左：

_center_horizontal = function() {
  return (($(window).width() - wrapper.width()) / 2) - (options.margin + options.border) + $(window).scrollLeft()
}

wrapper div位于.load()和$(window).resize() / $(window).scroll()上。

当图像被加载并附加到wrapper时，使用上述函数计算顶部和左侧，水平居中是正确的，但垂直居中不是。它大约10px或更多。

当浏览器窗口调整大小或滚动时，它会调用动画中心的功能，该功能使用相同的功能来计算左上角和左上角。窗口调整大小/滚动可以使图像正确居中。

我尝试过使用jQuery deferred.then（）让它在附加图像后计算顶部/左边，但它没有改变任何东西。

示例：http://jsfiddle.net/vfMNQ/

我最初认为当我玩包装填充（也就是我的边框）之类的东西时顶部位置的差异发生了变化，然而，我发现我错了。

我向console.log('image load height: ' + ((($(window).height() - wrapper.height()) / 2) - (options.margin + options.border)) + 'px')和.load()添加了一些.scroll()，发现无论如何差异都是奇怪的21px。默认边框是10px，边距是30 ......那么21来自哪里？

我讨厌使用+ 21作为黑客攻击，但似乎没有人可以解决这个问题。

Answer 1

最佳猜测：

您试图在实际放入图像之前计算包装的高度。

即。你是append(this)，然后在让浏览器有机会显示和加载图像之前立即尝试计算高度。

在调整显示大小后，我将调试代码wrapper.height()更改为40像素。 40个像素正是边界+边距。（当我改变那些时，差异也发生了变化。）

Answer 2

包装器延迟获取图像的高度和宽度。用于居中的jQuery在浏览器执行其重排之前执行，并给予“包装器”图像的高度和宽度。

我把你的小提琴分叉并在这里修好：http://jsfiddle.net/3th5k/ 通过在居中之前使用javascript设置包装器的高度和宽度。这样，您的居中计算就会从正确的数据源，即javascript图像对象而不是dom。

中提取

另请注意，带有'opacity：0'的css语句已替换为.hide（）;我这样做是因为不透明度，即不是朋友，它很可能会导致问题。

干杯！

Answer 3

您的问题似乎出现在加载div中：


    .lbe-loading  {
    background: #578DB2 url(/public/images/loading.gif) no-repeat center center;
    width: 32px;
    height: 32px;
    padding: 5px;
    }

高度： 32 +填充：（5 * 2）= 42

42/2 = 21px

看起来你已经附加了图片，加载div仍附加到包装器上。

wrapper.append(loading);

...

$(function() {

var img = $(new Image());
img.load(function() {
wrapper.append(this)    // .lbe-loading still appended here 
.css({                  // Position wrapper. 
    ...
});

loading.remove();       // Too late.

如果我删除.append（加载），它就会很好。

将.lbe-load放在另一个div上，这样它就不会被添加到包装器的高度。

相同的计算函数，取决于.load（）和.resize（）或.scroll（）的不同结果

3 个答案: