$(window).load(function(){});歌剧中的问题 [英] $(window).load(function(){}); problem in Opera

问题描述

我需要重新计算主体的主要div高度，然后等待所有内容(图像)加载完毕，然后再将其显示给网站访问者.
为此，我使用了jQuery和CSS

I need to recalculate body's main div height, than wait while all content (images) loads and only than show it to site visitor.
To achieve this i used jQuery and 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]

Everything works fine in IE, Firefox, Safari. In Chrome height calculation works, but seems that body doesn't hides, because all images loads as usual they should. In Opera, both functions doesn't work. Not page is showed when all content is loaded, not page calculation works.
You would better understand what I am talking about: [Site where this problem is][1]

[1]:不实际

感谢您的回复，兄弟们

推荐答案

您需要了解$(document).ready()与常规加载事件(基本上就是$(window).load()之间的区别)可以使用).

You need to understand the difference between $(document).ready() and a normal load event (which is basically what $(window).load() would work with).

当整个文档准备好进行JavaScript交互-加载所有HTML和JavaScript时，发生文档就绪"事件.很有可能不是全部图像都已加载，CSS是否已加载和应用尚不确定(浏览器的操作有所不同).

The "document ready" event occurs when the entire document is ready for JavaScript interaction - all the HTML and JavaScript is loaded. Most likely, not all images are loaded, whether CSS is loaded and applied is somewhat uncertain (browsers do this a bit differently).

由于这些原因，做一些需要通过$(document).ready()计算布局/尺寸的事情不是一个好主意.在这种情况下，您将尝试在加载所有图像之前读取文档的大小-因此，当知道所有图像的大小时，您将获得浏览器知道大小之前的大小.

For these reasons, doing something that requires layout/size calculations from $(document).ready() is not a good idea. In this case you'll try to read the size of the document before all the images are loaded - so you get the size as it is before the browser knows what the size will be when it knows the size of all images.

如果我确定这是在load事件而不是document.ready上完成的话，在Opera中似乎就可以正常工作了.

It seems to work just fine in Opera here if I make sure this is done on load event rather than document.ready.

(另一个问题是Opera不会在display:none内容内加载图像，直到您实际更改显示以要求图像为止.这可以提高加载性能，但有时意味着当有多余内容时，用户必须等待图像加载显示.)

(Another issue is that Opera does not load images inside display:none content - until you actually change display so that the images are required. This improves loading performance but sometimes means the user has to wait for images loading when extra content is shown.)

这篇关于$(window).load(function(){});歌剧中的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！