0

私はjavascriptを使用して、ページ上のすべての画像記事に垂直または水平のクラスを追加しています。コードが機能しているという問題がありますが、.vertical（高さ450pxを超える画像を含む投稿）が必要な写真であっても、常に.horizo​​ntalを記事クラスに追加しています。どんな助けでもいただければ幸いです。

$('img.photo').each(function(){
            if($(this).height() > 450) { 
                $(this).closest('article').addClass('vertical'); 
            } else {
                $(this).closest('article').addClass('horizontal'); 
            }
        });

例：http ： //blog.jamescharless.com/男の子の最初の写真は、高さが450ピクセルをはるかに超えていますが、垂直方向のクラスではなく、水平方向になっています。

4

2 に答える 2

3

高さが予想どおりでない2つの考えられる理由

  1. 画像はまだ読み込まれておらず、CSSで高さが定義されていません
  2. 画像はまだ公開されていません（display: none）

コードはloadコールバックを利用でき、画像がではないことも確認する必要があり:hiddenます。

$(function(){
    $('img:not(:hidden)').load(function(){
        // logic
    });
});
于 2012-09-11T20:07:37.413 に答える
1

に変更.eachしてみてください.load。ロードされると、画像ごとに関数が呼び出されます。

$('img.photo').load(function(){
            if($(this).height() > 450) { 
                $(this).closest('article').addClass('vertical'); 
            } else {
                $(this).closest('article').addClass('horizontal'); 
            }
        });
于 2012-09-11T20:07:21.827 に答える