Retrieving width() and height()information from loaded through html()

Question

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.

No. Because the problem is having this function to load an image which is not completly loaded before retrieving info. And besides, I find it weird to put a function into `$(document).ready(function() {` but I might be wrong. — D4V1D, Sep 17 '13 at 15:26
Are you calling that function from inside `$(document).ready`? — Alvaro, Sep 17 '13 at 15:28

Patrick Evans · Accepted Answer · 2013-09-17T15:13:33.277

1

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

edited Sep 17 '13 at 15:13

answered Sep 17 '13 at 15:03

Patrick Evans

41,991
6
74
87

Add this to the end `if (img.complete) $(img).load();` It causes the `onload` handler to fire for cached images ;) – Reinstate Monica Cellio Sep 17 '13 at 15:05
@Patrick Evans > Wonderful!! Your script works and behaves exactly like expected. Thank you so much. @Archer > Adding `if (img.complete) $(img).load();` at the end makes the script to fail. Should I put it before or after `img.src = src;` ? – D4V1D Sep 17 '13 at 15:28
What do you mean it causes it to fail? do you get a error message in the console or something? – Patrick Evans Sep 17 '13 at 15:30
1

@user2788131 It should be after assigning `src`, as it is in the above code. I just tested it and it worked fine for me. Leave it out if it's causing issues, but you may find further issues with cached images. – Reinstate Monica Cellio Sep 17 '13 at 15:32
@PatrickEvans No console message but an image of 0x0 appears because it has its inline style `display` set to `none`. – D4V1D Sep 17 '13 at 15:37

Retrieving width() and height()information from loaded through html()

1 Answers1