Noe*_*tin 34 javascript jquery dom
所以,我需要知道一个元素的宽度与javascript,我的问题是函数触发太早,宽度在css被tottally应用时改变.据我所知,$(document).ready()函数在文档完成时被触发,但似乎没有那样工作.
无论如何,我确信使用代码我的问题将被理解(这是一个简化的例子):
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'>
<style type="text/css">
#target {
font-family: 'Parisienne', cursive;
float: left;
}
</style>
</head>
<body>
<div id="target">Element</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
console.debug($('#target').outerWidth());
alert('hold on');
console.debug($('#target').outerWidth());
});
</script>
我想知道#target div的宽度,问题是在警报之前执行的代码提供的输出与之后的输出不同,可能是因为字体未完全加载并且它使用默认字体测量div.
它可以像我在Google Chrome中所期望的那样工作,但它不适用于IE和Firefox.
max*_*ler 70
如果您依赖外部内容(例如图像,字体),则需要使用window.load事件
$(window).on("load", function() {
// code here
});
本文描述了这些事件的行为:
有[a]就绪状态,但称为DOM-ready.这是当浏览器实际构建页面但仍可能需要抓取一些图像或Flash文件时.
编辑:更改语法也适用于jQuery 3.0,如Alex H所述
Spa*_*rky 12
引用OP:
"据我所知,
$(document).ready()文件完成后该功能被解雇了,"
$(document).ready()当DOM("文档对象模型")完全加载并准备好被操作时触发.DOM与"文档"不同.
你可以试试$(window).load()功能......
$(window).load(function() {
// your code
});
它会等待所有页面的资源(如图像和字体等)在开始之前完全加载.
一旦DOM完成,jQuery .ready()函数就会触发.这并不意味着当时已加载所有资产(如图像,CSS等),因此元素的大小可能会发生变化.
如果需要元素的大小,请使用$(window).load().
| 归档时间： |
|
| 查看次数： |
29378 次 |
| 最近记录： |