1

div画像とキャプションを含める画像ラッパーがあります。

以下を使用して、イメージ ラッパーdivのサイズをイメージの幅に合わせます。

$('.imgright').each(function(){
    $(this).width($(this).find('img').outerWidth());
});

div親クラスに依存している場合は、別の画像パスも使用したいと考えています。以下の作品：

$('.grid_12').each(function(){
    $(this).find('img').each(function(){
        $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
    });
});

しかし、これらを一緒にすると、イメージ ラッパーの幅が常に設定されるわけではありませんdiv。

$('.grid_12').each(function(){
    $(this).find('img').each(function(){
        $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
    });
});
$('.imgright').each(function(){
    $(this).width($(this).find('img').outerWidth());
});

助言がありますか？

2 つの非常に簡単な回答のおかげで、コードを再構築し、.load()関数を使用して変更された画像の詳細を取得しました。

作業コードは次のとおりです。

$('.grid_12').each(function(){
   $(this).find('img').each(function(){
     $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
     $(this).load(function(args){
       var newWidth = $(this).outerWidth();
       $(this).parent('.imgright').each(function(){
         $(this).width(newWidth);
       })
     })
   })
});
4

2 に答える 2

0

画像がまだロードされていない可能性がありますか？ImagePath を変更すると、ロード ハンドラをイメージに追加できます。

$('.grid_12').each(function(){
  $(this).find('img').each(function(){
    $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
    $(this).load(function(args){/* find the parent div and change size */});
  });
});
于 2011-04-20T14:38:59.033 に答える
0

手始めに、チェーンを活用してコードをもう少し簡潔にすることができます。

$('.grid_12').each(function(){
    $(this)
        .find('img')
            .each(function(){
                $(this)
                      .attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
            })
            .end()
        .width($(this).find('img').outerWidth());
});

さて、あなたの問題に関しては、画像をロードして（srcを変更して）、最初に画像のロードが完了したかどうかを最初に確認せずにすぐに寸法を取得しようとしていることです。

この質問は、あなたを正しい方向に導くのに役立つようです:

Javascript/jQuery を使用して、画像が読み込まれたかどうかを確認するにはどうすればよいですか?

于 2011-04-20T14:41:03.363 に答える