jQuery innerWidth в Chrome с невидимыми элементами

Question

У меня странная проблема с jQuery 1.5.2 в Chrome.

У меня есть код, который выглядит следующим образом

$("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 возвращает 0 для innerWidth и innerHeight. Мне действительно нужно учитывать отступы, отсюда и внутренние функции.

Как лучше всего справиться с этой ситуацией? Я сейчас использую

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 вычисляет отдельные отступы, но я подозреваю, что адаптация может улучшить секцию else моего хака.

Есть ли лучшее решение или обходной путь для получения innerWidth и innerHeight при $img(":visible") == false?

Спасибо.

ДОПОЛНЕНИЕ:

Как отмечено в комментарии ниже, решение не так просто, как сделать изображение видимым, вычислить, а затем скрыть. Если что-то в родительской цепочке не видно, проблема возникает. Кроме того, некоторые вещи могут вызвать проблему.

Высота и ширина рассчитываются до нуля как в Chrome, так и в FireFox, если изображение или потомок имеет display:none. Chrome, но, очевидно, не FireFox, также работает, когда изображение скрыто, потому что потомок имеет overflow:hidden. Я попытаюсь увидеть, как это работает в Safari позже в эти выходные.

Answer 1

Если кто-то не придумает лучшего объяснения происходящего или лучшего решения, я думаю, что это лучший способ справиться с ситуацией:

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;
        }
    }
}

Answer 2

Как насчет того, чтобы сделать ваше изображение видимым, взять ширину / высоту и сделать ваше изображение снова невидимым? Пользователь даже не должен видеть, как он появляется / исчезает, если ваше изображение не дерьмово 15 МБ:).