Jquery.height() 使用 F5 或 CTRL+F5 返回不同的结果

Question

所以我试图找到我的图像的高度，然后添加一个上边距，这使我能够强加一个垂直中心。

我正在运行这段代码，在 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'});



            });

});

非常感谢任何想法/帮助/解释。 谢谢

Answer 1

在提取高度之前，您需要确保图像已加载。您可以使用图像上的complete 属性轻松检查这一点。试试这个：

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

Answer 2

在向浏览器询问其高度之前，您需要确保图像已加载。如果该图像路径存在于 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-developer 工具栏。

Answer 3

试试这个方法：

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

Answer 4

图像是/可以与实际页面内容分开缓存/加载。准备好的文档可以（根据我的经验通常是）在所有内容加载之前发生。

尝试将事件侦听器添加到正在加载的实际元素。

Answer 5

onload 和 onready 是有区别的。

ready 将等到实际的 DOM 树完成，而 onload 将等到页面上显示的所有内容都完成加载。所以一种解释是，在清除缓存和刷新时，dom 树的完成速度比图像快得多，因此给出了错误的高度。

尝试使用 onload-event 来代替，看看是否会得到不同的结果。