2

私の問題は次のとおりです。ユーザーが現在のページに表示されている画像をズームできるようにするスクリプトを開発しました。$('div#imageBox').html()クリックする<div>と、 と を介してロードされます<img>。以下では、読み込まれた画像のwidthやなどの情報を取得しています。height

うまくいくこともあれば、うまくいかないこともあります。DOM の読み込みに問題があることは知っていますが、奇妙なことに、それが機能する場合と機能しない場合がある理由がわかりません。のであるため、<div>の0x19pxサイズをロードします。<img>0x0

ここに私のjQueryコードがあります:

function imageBox(src, legende)
{

    $('DIV#imageBox').empty().fadeIn().html('<div><a href="'+src+'" target="_blank"><img src="'+src+'" /></a></div>');

    var marginLeft = $('DIV#imageBox DIV').width() / 2;
    var marginTop = $('DIV#imageBox DIV').height() / 2;
    var hauteur = $('DIV#imageBox IMG').height();
    var largeur = $('DIV#imageBox IMG').width();
    var bottom = $('DIV#imageBox SPAN').height();

    //alert(marginLeft+'/'+marginTop+'/'+hauteur+'/'+largeur+'/'+bottom);

    if(legende)
        $('DIV#imageBox').find('DIV').append('<span>'+legende+'</span>');

    if(largeur > $(window).width())
        largeur = $(window).width() * 0.8;

    if(hauteur > $(window).height())
        hauteur = $(window).height() * 0.8;

    // Récupération des nouvelles valeurs au cas où l'image soit redimensionné car trop grande
        $('DIV#imageBox IMG').hide().height(hauteur);
        largeur = $('DIV#imageBox IMG').width();
        marginTop = hauteur / 2;
        marginLeft = largeur / 2;


    if(!$('DIV#imageBox IMG').is(':animated')) {
        $('DIV#imageBox IMG').show().height(0).animate({'height': hauteur}, 300);
        $('DIV#imageBox SPAN').width(0).animate({'width': largeur-10}, 300);
    }

    $('DIV#imageBox DIV').css({
        'top': '50%',
        'left': '50%',
        'marginTop': '-'+(marginTop)+'px',
        'marginLeft': '-'+(marginLeft)+'px'
    });
    $('DIV#imageBox SPAN').css('bottom', '-'+bottom+'px');
    $('DIV#imageBox SPAN:before').css('top', hauteur);


}

ご不明な点がございましたら、お気軽にお問い合わせください。期待したほど明確ではなかったかもしれません。

4

1 に答える 1

1

画像ソースは既にあるので、それを使用して画像要素を作成し、onloadイベントで必要なコードを実行します。

function imageBox(src, legende) {
   $('DIV#imageBox').empty().fadeIn().html('<div><a href="'+src+'" target="_blank"><img src="'+src+'" /></a></div>');
   var img = document.createElement("img");
   img.onload = function() {
      var imgW = this.width; //Images width
      var imgH = this.height; //Images height
      //Do whatever else is needed
   };
   img.src = src;
   //As suggested by Archer, to trigger load even with cached images
   if (img.complete) $(img).load();
}
于 2013-09-17T15:03:00.920 に答える