jQuery innerWidth in Chromeの非表示要素

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の場合、innerWidthとinnerHeightでChromeが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が個々のパディングをどのように計算するのかをはっきりと解明することはできませんが、それを適応させることは私のハックのelseセクションを改善すると思われます。

より良い解決策がありますかinnerWidthとinnerHeightの場合$img(":visible") == false？

ありがとうございました。

補足：以下のコメントで述べたよう

、溶液は、画像を可視化計算し、次いで、隠蔽のように単純ではありません。親チェーン内の何かが見えない場合、問題が発生します。さらに、問題を引き起こす原因がいくつかあります。

画像または子孫がdisplay:noneの場合、ChromeとFireFoxの高さと幅はゼロになります。クロムは、明らかに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メガバイトのshitloadでない限り、ユーザーは表示/非表示を見てはいけません。