CODEWITHSUNDEEP
jqueryhtmlimageheightwidth
D4V1D
D4V1D

Reputation: 5849

Retrieving width() and height()information from <img> loaded through html()

My problem is the following: I developed a script that allows an user to zoom over an image displayed on the current page. On click, it loads through $('div#imageBox').html() a <div> and an <img>. On the following, I'm retrieving pieces of information such as the width and the height of the loaded image.

Sometimes it works, sometimes it doesn't. I know there is a DOM-loading issue but the weird thing is that I can't figure out why sometimes it works and it doesn't. It loads a <div> of 0x19px size because of an <img> of 0x0.

Here is my jQuery code :

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);


}

Should you have any questions, don't hesitate. I might not have been as clear as I hoped.

Upvotes: 2

Views: 252

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42736

Since you already have the image source use it to create a image element and execute the code that is needed on the onload event

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();
}

Upvotes: 1

Related Questions