So I am trying to find the height of my images then add a top margin this enables me to impose a a vertical center.

I'm running this code, and on an F5 refresh I get correct height but on CTRL+F5 refresh it gives me a much smaller height. I kind of assume this is a loading/delay thing, but I am using document ready so not really sure whats going on. I tried using a php function but it slows the site down amazingly so have to stick with jquery.

you can see it working here. www.mzillustration

 jQuery(document).ready(function() {

 if (jQuery('.imagedisplay').length != 0) {
                jQuery('.imagedisplay').each(function(){ 

                var imgheight = jQuery(this).find('img').height();

                var topmarg = ((240 - imgheight) / 2) ; 

                jQuery(this).find('img').css({'margin-top':topmarg+'px'});



            });

});

any ideas/help/explanation much appreciated. thanks

So I am trying to find the height of my images then add a top margin this enables me to impose a a vertical center.

I'm running this code, and on an F5 refresh I get correct height but on CTRL+F5 refresh it gives me a much smaller height. I kind of assume this is a loading/delay thing, but I am using document ready so not really sure whats going on. I tried using a php function but it slows the site down amazingly so have to stick with jquery.

you can see it working here. www.mzillustration.

 jQuery(document).ready(function() {

 if (jQuery('.imagedisplay').length != 0) {
                jQuery('.imagedisplay').each(function(){ 

                var imgheight = jQuery(this).find('img').height();

                var topmarg = ((240 - imgheight) / 2) ; 

                jQuery(this).find('img').css({'margin-top':topmarg+'px'});



            });

});

any ideas/help/explanation much appreciated. thanks

• javascript
• jquery

• 6 You must wait until the image is loaded before you get it's height. Ctrl+F5 refreshes your cache. That is why pressing F5 makes it work, and Ctrl+F5 doesn't. When the image is cached, it will usually have a height immediately. – Kevin B Commented Nov 9, 2012 at 18:46
• If the code runs before the image has been loaded you'll get 0. By using CTRL + F5 you are asking the browser to fetch the images again and not used the cached version, thus the difference. You should try implementing a solution with the img element's load event. – iMoses Commented Nov 9, 2012 at 18:47
• 1 Could not agree with Kevin B more. – Travis J Commented Nov 9, 2012 at 18:48

5 Answers 5

There is a difference between onload and onready.

ready will wait until the actual DOM-tree is done, while onload will wait until ALL of the content displayed on the page is finnished loading. So an explanation would be that when clearing the cache and refreshing, the dom tree finishes much faster than the images, hence giving the wrong heigh.

Try using the onload-event instead and see if you get a different result.

You need to insure the image has loaded before asking the browser for its height. If that image path is living in the html you will unfortunately need a jquery pluggin to handle this in a cross browser manner.

https://github./alexanderdickson/waitForImages

http://desandro.github./imagesloaded/

Or you will have to wait for the window.onload event which in jquery looks like this:

  $(window).on('load', function(){....

However if you use the window load event, it will wait until ALL resources have loaded and depending on your site that can be a serious delay when pared to measuring just the image itself.

Or if you are fortable with loading the image from javascript, simply ordering your code properly will handle this:

 var loadTester = new Image(),
     imgH;
 $(loadTest).on('load',function(){
     imgH = $('#image').attr('src',loadTester.src).height();
 }
 loadTester.src = "paht/to/image.jpg";

The reason you are seeing a difference in the manner you reload the page, is that a simple refresh does not clear the cache, so the image is already loaded. When you hit ctrl+f5 it clears the cache and so the image is not yet loaded when you ask the browser for the height.

For cache control durring development consider getting the firefox web-developer toolbar.

Try this approach:

jQuery(function() {
    jQuery('.imagedisplay img').each(function() {
        var $this   = jQuery(this),
            height  = $this.height();
        if (height) {
            $this.css('margin-top', ((240 - height) / 2) + 'px');
        } else {
            $this.on('load', function() {
                $this.css('margin-top', ((240 - $this.height()) / 2) + 'px');
            });
        }
    });
});

images are/can be cached/loaded separately from the actual page content. the document being ready can (and in my experience usually) occurs before everything is loaded.

try adding an event listener to the actual element being loaded.

You need to make sure the image has loaded before extracting a height. You can easily check this using the plete property on the image. Try this:

var setH = function() {
    $(this).css('margin-top', (240 - this.height) / 2);
}
$('.imagedisplay img').each(function() {
    if( this.plete ) {
        setH.call(this); // apply height straight away
        return;
    }
    $(this).load(setH); // apply height when the image has loaded
});