Jquery.height（）使用F5或CTRL + F5返回不同的结果
所以我试图找到我的图像的高度，然后添加一个顶部边距，这使我可以施加一个垂直中心。
我运行这个代码，并在F5刷新我得到正确的高度，但在CTRL + F5刷新它给我一个小得多的高度。 我有点认为这是一个加载/延迟的事情，但我正在使用文档准备好，所以不知道发生了什么事情。 我尝试使用PHP函数，但它令人惊讶地减慢了网站，所以必须坚持使用jQuery。
你可以看到它在这里工作。 www.mzillustration.com
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'});
});
});
任何想法/帮助/解释非常赞赏。 谢谢
onload和onready之间有区别。
准备好等到实际的DOM树完成后，onload会等待，直到页面上显示的所有内容都被完成加载。 所以一个解释是，当清除缓存并刷新时，dom树比图像快得多，因此给出错误的高度。
尝试使用onload事件，看看你是否得到不同的结果。
在向浏览器询问其高度之前，您需要确保图像已加载。 如果该图像路径生活在html中，你将不得不需要一个jQuery插件来以跨浏览器的方式处理这个。
https://github.com/alexanderdickson/waitForImages
http://desandro.github.com/imagesloaded/
或者你将不得不等待在jQuery中看起来像这样的window.onload事件：
$(window).on('load', function(){....
但是，如果您使用窗口加载事件，它将等待，直到所有资源已加载，并根据您的网站，可能是一个严重的延迟相比，只测量图像本身。
或者，如果您对从JavaScript加载图像感到满意，只需正确地订购代码即可处理此问题：
var loadTester = new Image(),
imgH;
$(loadTest).on('load',function(){
imgH = $('#image').attr('src',loadTester.src).height();
}
loadTester.src = "paht/to/image.jpg";
您看到重新加载页面的方式有所不同的原因是，简单的刷新不会清除缓存，因此图像已经加载。 当你点击ctrl + f5时，它会清除缓存，因此当你向浏览器询问高度时图像还没有加载。
在进行缓存控制的过程中，考虑获取Firefox的Web开发者工具栏。
尝试这种方法：
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');
});
}
});
});
上一篇: Jquery.height() returns different results using F5 or CTRL+F5