Question

我需要重新计算身体的主要div高度，而不是等待所有内容（图像）加载并且只显示给网站访问者。
为了实现这一点，我使用了jQuery和CSS

//CSS looks like
body {display: none;}


/* div block height calculator */
function recalculateHeight(id, add){
 var height = $(id).height();

 if (height < 650) height = 650;

 if (add)
  height = height + add;

 $('#left_div').height(height);
 $('#center_div').height(height);
 $('#right_div').height(height);
}
//recalculate height when page is fully loaded
$(document).ready(function(){
 $(window).load(function(){
  $('body').show();
  recalculateHeight("#center_div");
 });
});

在IE，Firefox，Safari中一切正常。在Chrome高度计算工作，但似乎身体不隐藏，因为所有图像像往常一样加载它们应该。在Opera中，这两个功能都不起作用。加载所有内容时不显示页面，而不是页面计算你会更好地理解我在说什么： [这个问题所在的网站] [1]

[1]：不是实际的

感谢您的回复，brgds

Answer 1

你需要理解$（document）.ready（）和普通加载事件（基本上是$（window）.load（）可以使用的）之间的区别。

当整个文档准备好进行JavaScript交互时，会发生“文档就绪”事件 - 加载了所有HTML和JavaScript。最有可能的是，并非所有图像都被加载，无论是加载CSS还是应用CSS都有些不确定（浏览器这样做有点不同）。

由于这些原因，做一些需要从$（document）.ready（）进行布局/大小计算的东西并不是一个好主意。在这种情况下，您将尝试在加载所有图像之前读取文档的大小 - 这样您就可以在浏览器知道所有图像的大小时知道大小之前获得大小。

如果我确保在load事件而不是document.ready上完成，那么在Opera中似乎工作得很好。

（另一个问题是Opera不会在display：none内容中加载图像 - 直到你实际更改显示以便需要图像。这可以提高加载性能，但有时候意味着用户必须等待加载图像时额外的内容是示出。）

Answer 2

实际尝试：

//recalculate height when page is fully loaded
 $(window).load(function(){
  $('body').show();
  recalculateHeight("#center_div");
 });

而不是：

$(document).ready(function(){
 $(window).load(function(){
  $('body').show();
  recalculateHeight("#center_div");
 });
});

Answer 3

更好的解决方案是在html中指定图像的高度和宽度。那么你不需要window.load，因为它们的高度不会改变。

另外我认为Sarfraz的观点是你不应该把window.load放在document.ready中。它们应该处于同一水平。

$（窗口）.load（函数（）{}）; Opera中的问题

3 个答案: