2

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

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



            });

});

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

4

5 回答 5

6

onload 和 onread 之间是有区别的。

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

尝试改用 onload-event 并查看是否得到不同的结果。

于 2012-11-09T18:48:34.330 回答
3

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

在此处输入图像描述

于 2012-11-09T18:49:30.493 回答
1

试试这个方法：

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');
            });
        }
    });
});
于 2012-11-09T18:56:05.857 回答
0

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

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

于 2012-11-09T18:49:47.310 回答
0

在提取高度之前，您需要确保图像已加载。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
});
于 2012-11-09T19:20:22.947 回答