jquery - $(窗口).load(函数(){});歌剧中的问题

标签 jquery html css opera

我需要重新计算 body 的主要 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 中,高度计算有效,但似乎 body 没有隐藏,因为所有图像都应该像往常一样加载。 在 Opera 中,这两个功能都不起作用。加载所有内容时不显示页面,页面计算不起作用。
你会更好地理解我在说什么: [出现此问题的站点][1]

[1]:不真实

感谢您的回复,brgds

最佳答案

您需要了解 $(document).ready() 和普通加载事件(这基本上是 $(window).load() 可以处理的)之间的区别。

“文档就绪”事件在整个文档准备好进行 JavaScript 交互时发生——所有 HTML 和 JavaScript 都已加载。很可能并非所有图像都已加载,是否加载和应用 CSS 有点不确定(浏览器的做法略有不同)。

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

如果我确保这是在加载事件而不是 document.ready 上完成的话,它似乎在 Opera 中工作得很好。

(另一个问题是 Opera 不会在 display:none content 中加载图像 - 直到您实际更改显示以便需要图像。这提高了加载性能,但有时意味着用户必须等待额外内容加载时的图像显示。)

关于jquery - $(窗口).load(函数(){});歌剧中的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2707658/

相关文章:

javascript - 使用 jquery 可排序和 css 变换/过渡

javascript - 使用 TinyMCE 富文本编辑器 - 如何修改文本框大小?

html - 在div内包装没有空格的长文本

html - Bootstrap 3.0 内联标题标签

css - 无法在与 Bootstrap 的同一行上设置选择

html - 如果我只针对现代浏览器,是否还需要 normalize.css?

javascript - 工具提示中的图标

javascript - 在 jQuery 中获取最接近元素的形式

javascript - 通过 jQ 分配 CSS - 语法

不同浏览器的 HTML 输入字段高度不同