3

私のサイトでFlexSliderを使用して、スライダーの最初の画像の高さを取得しようとしています。次のコードでうまくいくと思いましたが、画像の読み込みが非常に遅いようで、このjQueryイベントの高さがありません。コードは「0」を返します。

$(window).load(function() {
    $(document).ready(function() {
        var height = $(".flexslider>div>ul>li.flex-active-slide>a>img").height();
        console.log(height);
    });
});

ただし、ページの読み込み後にブラウザコンソールでこのコードを実行すると、正しい高さが返されます。

jQueryまたはJavaScriptを使用して、ページの読み込み/準備完了時に画像の高さを取得するにはどうすればよいですか？

4

2 に答える 2

4

これは実際の問題とは何の関係もないにもかかわらず、window.load イベントが document.ready の後に発生することを明確にしていただきありがとうございます。

コードが「0」を返した理由は、デフォルトの flexslider.css の css-class が原因でした:

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */

解決策は、コールバック APIを使用して、スライダーが正しく読み込まれるまで待機することでした。

$(window).load(function() {
    $(".flexslider").flexslider({
        start: function() {
            var height = $(".flexslider a>img").first().height();
            console.log(height);
        }
    });
});
于 2013-02-11T13:29:03.830 に答える
1

ready イベントは HTML ドキュメントがロードされた後に発生しますが、onload イベントは後ですべてのコンテンツ (画像など) もロードされたときに発生します。

onload イベントは DOM の標準イベントですが、ready イベントは jQuery に固有です。準備完了イベントの目的は、ページ内の要素に機能を追加するコードがすべてのコンテンツが読み込まれるのを待つ必要がないように、ドキュメントが読み込まれた後できるだけ早く発生することです。

window.onload と $(document).ready()を参照してください

  $(document).ready(function() {  
       console.log($('.flexslider > ul > li > a > img').height()); 
  });

デモhttp://jsfiddle.net/ducwidget/cufsn/1/を参照してください

于 2013-02-11T10:46:13.017 に答える