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

Posted 2023-03-06

【中文标题】Jquery.height() 使用 F5 或 CTRL+F5 返回不同的结果

【英文标题】：Jquery.height() returns different results using F5 or CTRL+F5

【发布时间】：2012-10-30 03:01:44

【问题描述】：

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

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



            );

);

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

【问题讨论】：

您必须等到图像加载完毕才能获得它的高度。 Ctrl+F5 刷新缓存。这就是为什么按 F5 使它起作用，而 Ctrl+F5 不起作用。当图像被缓存时，它通常会立即有一个高度。

如果代码在图像加载之前运行，您将得到 0。通过使用 CTRL + F5，您要求浏览器再次获取图像而不使用缓存版本，因此存在差异。您应该尝试使用img 元素的加载事件来实现解决方案。

不能再同意 Kevin B 的观点。

【参考方案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
);

【参考方案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 工具栏。

【参考方案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');
            );
        
    );
);

【讨论】：

你也可以用this.height代替$this.height()。

我喜欢这个，因为直截了当，但不幸的是，当我得到一个高度值时它不起作用，它只是不正确。

【参考方案4】：

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

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

【参考方案5】：

onload 和 onready 是有区别的。

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

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

【讨论】：

我使用 onload 解决了这个问题，它确实为整个工作注入了暂停，但它肯定是解决我的问题的最简单（也许不是最好）的方法。谢谢。