2


1

画像のJQueryロードイベント

画像が読み込まれたときに、画像の親のサイズを画像の同じサイズに変更します。

現時点では、このコードを使用しています:

$(window).load(function(){
    $('.image-principale').each(function(){
        $(this).parent().css('height', $(this).height());
    });
});

動作しますが、_every_イメージが読み込まれたときにのみ実行される点が異なります。 ロードハンドラーをすべての画像に直接追加しようとしましたが、トリガーされません。

どうしましたか?

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

5 Answer


5


以下を試してください。

...Your HTML...


    $('.image-principale').load(function(){
        $(this).parent().css('height', $(this).height());
    });

スクリプトはHTMLの後に配置する必要があります。そうしないと、「要素が存在する前に実行され、実際には何も実行されないことに注意してください。

次のように `live`を使用することもできます。

$('.image-principale').live('load', function(){
    $(this).parent().css('height', $(this).height());
});

ただし、実際に機能するかどうかはわかりません。


2


ドキュメントの準備は簡単です:

$(function() {
  $('.image-principale').load(function(){
    $(this).parent().css('height', $(this).height());
  });
});

あるいは:

$(function() {
  $('.image-principale').live('load', function(){
    $(this).parent().css('height', $(this).height());
  });
});

`ready()`の外側または内側。


2


基本的に、img要素からのloadまたはreadystatechangeイベントをリッスンする必要があります。

したがって、これを行う必要があります。

$(window).load(function(){
    $('.image-principale img').on("load readystatechange", function(){
        // Here you can check whether it state complete by checking
        // if(this.complete || (this.readyState == 'complete' && e.type == 'readystatechange') ) { }
        $(this).parent().css('height', $(this).height());
    });
});

しかし…​ この方法には、いくつかの(大きな)警告があります。 つまり、「常に」機能せず、「キャッシュ」イメージ(時には)で機能しません。 最良の方法は、実際には、https://github.com/desandro/imagesloaded [jquery.imagesLoaded]と呼ばれるライブラリであるDesandroからの上記のコードの範囲(チェックが非常に難しい条件をさらにチェックします)です。

ロードイベント、およびその他の条件(破損したイメージ、キャッシュされたイメージ、ロードされた要素など)をチェックします。 )すべての要素が読み込まれたときにフィードバックを提供します。

使用法は次のとおりです(Webサイトで詳細を確認できます)。

// Loading script
var dfd = $('#my-container').imagesLoaded(function($images, $proper, $broken){
    //Here you can do a loop on $proper that is the list of images that properly loaded.
}); // save a deferred object and use dfd later

また、ロードされるすべての画像に対してコールバックを設定できます:

dfd.progress(function( isBroken, $images, $proper, $broken ){ });

これはあなたの(非常に古い…​ ごめんなさい)問題。 他の人を助けることができるので、ここに投稿します。


1


私のために働く:http://jsbin.com/ululo/edit

$(function(){
  $("img").load(function(){
    $(this).parent().height( $(this).height() );
  });
});


1


$( 'img')。loadは、画像のサイズが変更されるたびに起動するようです。 私の場合、それは私のサイトを遅くします。 (FFで試しました)