1

次の問題があります。ユーザーがサムネイル画像をクリックすると、遅延読み込みで大きな画像が読み込まれ、開きます。大きな画像を読み込むためのコードは次のとおりです。

<img width="663" height="845" class="big" data-original="real/path/to/image" src="path/to/empty/small/picture">

ユーザーがサムネイル画像をクリックすると、次のコードが実行されます。

$("img.thumb").click(function() 
 {      
    var $cont = $(this).siblings('.item-content').children('.big'); 
    $cont.attr('src', $cont.attr("data-original"));
    setTimeout(function(){
        $cont.css({'height': 'auto', 'width': '100%'});
    }, 600);
 });

レスポンシブ/流体レイアウトを作成しているため、各大きな画像のCSS"height"をに設定し"auto"、に"width"設定する必要があります。"100%"上記のコードは、"src"属性から属性値を取得し"data-original"ます。ただし"height: auto"、"width:100%"この例で600msは、属性が置換された後にに設定されています。これは機能しません。これには、Isotope jQueryプラグイン（http://isotope.metafizzy.co/）を使用しており、このプラグインでは、グリッドを適切に配置するために要素の実際の幅と高さが必要です。画像の読み込み中に"height: auto"と"width:100%"が設定されると、プラグインが失われ、要素の位置が正しくなくなります。

では、画像が読み込まれた後にこれら2つのCSSプロパティを設定するには、これをどのようにコーディングしますか？

4

2 に答える 2

1

使用できます.load()

$('img.big').load(function() {
    if($(this).attr('src') == $(this).attr('data-original')) {
        $(this).css({'height': 'auto', 'width': '100%'});
    }
});

http://jsfiddle.net/TYufy/4/-使用例.load()

于 2012-09-16T23:51:28.707 に答える
0

さて、私は解決策を見つけました： imagesLoadedと呼ばれる小さなjQueryプラグインがあります。選択したすべての子画像が読み込まれた後、コールバックがトリガーされます。.load()問題は、キャッシュされた画像では実行できないことでした。

于 2012-09-17T01:32:18.800 に答える