2

動的に追加された一部の img タグの実際の幅と高さを取得する際に問題があります。これが私のコードです：

var imgcont = $("<img src='' /> ");
imgcont.css("display","none").appendTo("body");`

$("div#lightbox ul").on("click","li", function(){
                    var source = $(this).children("img").attr("src");
                    console.log(imgcont.attr("src",source).width());
                })`

初めてクリックすると、幅と高さの正しい値が取得されますが、2 回目にクリックすると、前にクリックした要素の値が取得されます。正しい値を取得するには、同じ要素をもう一度クリックする必要があります。

最初のクリックで img の幅と高さの正しい値を取得するにはどうすればよいですか?

4

2 に答える 2

1

画像のサイズにアクセスするには、画像が読み込まれるまで待つ必要があります。

それを処理するには、画像のonloadイベントをキャッチします。

imgcont.on('load', function() {
    console.alert(this.width);
});

画面上の寸法ではなくthis.width、画像の実際の幅プロパティを取得する場合は、 を使用することに注意してください。それらは同じではないかもしれません。

于 2012-07-14T17:14:15.397 に答える
1 
$("div#lightbox ul").on("click", "li", function() {
    var source = $(this).children("img").attr("src");
    imgcont.attr("src", source).load(function() {  // after load finish
                                                   // get width

        console.log( this.width ); // according to @Alnitak comment
    });
})
于 2012-07-14T17:15:45.573 に答える