Jquery.height() Returns Different Results Using F5 Or CTRL+F5

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

Solution 1:

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.

Solution 2:

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.com/alexanderdickson/waitForImages

http://desandro.github.com/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 compared to measuring just the image itself.

Or if you are comfortable 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.

Solution 3:

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

Solution 4:

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.

Solution 5:

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

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