4

Curious problem. I have a set of images with some attributes that I'd like to use in a div (as a caption). Using each, I want to get the width of the image (and some other properties), to align the dynamically generated div properly (as a caption of the image).

img = $('img') 
img.each(function(index){
    var width = $(this).width();
    console.log(width);
    // other properties
    $('<div class="caption">Some text</div>').insertAfter($(this));

$(this).next().css({
  'width': width
  // other properties
});

ただし、$(this).width() が正しい値を取得する場合もあれば、0 を取得する場合もあります。特に、方向バーに戻ったときに適切に動作しますが、Ctrl + R を押したときではなく、Chrome でのみ動作します。すべてのブラウザで同じように機能するわけではないので、混乱しています。画像が読み込まれる前に Jquery が wi​​dth() を取得しようとしていると思ったので、コードを (function(){})() ではなく document.ready(function(){}) でラップしましたが、機能しませんどちらにしても。

何が起こっている可能性がありますか？参考までに、これらは画像に適用されるスタイルです。

display: block;
padding: 4px;
line-height: 1;
max-width: 100%;
margin-left: auto;
margin-right: auto;

したがって、計算された幅を取得したいと思います（私の知る限り、.css（）で取得する必要がありますが、この場合は一貫していません）。

よろしく

4

2 に答える 2

3

jQuery は の画像を待ちません$(document).ready()。ここの例 5 で述べたように代わりに
試してください$(window).load()

于 2012-06-04T19:16:34.137 に答える
2

おそらく、そのコードを実行すると、画像が常に完全に読み込まれるわけではありません。最初に画像の読み込みが完了していることを確認してください。

function imgDone(){
    var width = $(this).width();
    console.log(width);
    // other properties
    $('<div class="caption">Some text</div>').insertAfter($(this));
}
$('img').each(function(index){
    if (this.complete || this.readyState = 4)
        imgDone.apply(this);
    else
        $(this).load(function(){
            imgDone.apply(this);
        });
});
于 2012-06-04T19:16:36.413 に答える