Question

我在Chrome中遇到了jQuery 1.5.2的奇怪问题。

我的代码如下所示

$("img").each(function () {
    if (this.complete) {
        imageOnload.call(this);
    } else {
        $(this).bind("load", imageOnload);
    }
});

function imageOnload () {
  var $this = $(this);

  foo($this); 
}

function foo ($img) {
  var width = $img.innerWidth();
  var height = $img.innerHeight();
}

请注意，这个问题的确非常简化。

上述情况在大多数情况下都很有效。问题是，当$img(":visible") == false时，Chrome为innerWidth和innerHeight返回0。我实际上需要考虑填充，因此内部函数。

处理这种情况的最佳方法是什么？我目前正在使用

function foo ($img) {
    var width;
    var height;

    if ($img.is(":visible")) {
        width = $img.innerWidth();
        height = $img.innerHeight();
    } else {
        var img = $img[0];
        var pt = parseInt(img.style.paddingTop);
        var pb = parseInt(img.style.paddingBottom);
        var pl = parseInt(img.style.paddingLeft);
        var pr = parseInt(img.style.paddingRight);

        width = img.width + pl + pr;
        height = img.height + pt + pb;
    }
}

但我知道这充满了问题。我不能完全解释jQuery如何计算单个填充，但我怀疑适应这将改善我的黑客的其他部分。

在innerWidth时获取innerHeight和$img(":visible") == false是否有更好的解决方案或解决方法？

感谢。

附录：

如下面的评论中所述，解决方案并不像使图像可见，计算，然后隐藏一样简单。如果父链中的某些内容不可见，则会出现问题。此外，一些事情可能会引发问题。

当图像或后代具有display:none时，Chrome和FireFox中的高度和宽度计算为零。 Chrome，但显然不是FireFox，当图像被屏蔽掉时也是如此，因为后代有overflow:hidden。我将在本周末晚些时候尝试在Safari中查看这是如何工作的。

Answer 1

如何设置图像，获取宽度/高度并使图像再次隐藏？用户甚至不应该看到/消失，除非你的图像是15mb shitload：）。

Answer 2

除非有人对正在发生的事情或更好的解决方案提出更好的解释，否则我认为这是处理这种情况的最佳方式：

function foo ($img) {
    var width;
    var height;

    if ($img.is(":visible")) {
        width = $img.innerWidth();
        height = $img.innerHeight();
    } else {
        var img = $img[0];

        width =  img.width;
        height = img.height;

        var style = null;

        if (window.getComputedStyle) {
            style = window.getComputedStyle(img, null);
        } else if (img.currentStyle) {
            style = img.currentStyle;
        }

        if (style) {
            var pt = parseInt(style.paddingTop);
            var pb = parseInt(style.paddingBottom);
            var pl = parseInt(style.paddingLeft);
            var pr = parseInt(style.paddingRight);

            width +=  img.width + pl + pr;
            height += img.height + pt + pb;
        }
    }
}

Chrome中的jQuery innerWidth具有不可见元素

2 个答案: