在Css導致保證金錯誤之前放置JS文件

我有一個外部JavaScript文件和Css文件。在This question中，他們表示在Css之前包括Js可能會提高性能。但是如果我在Css之前加載JS，當我調用.offset（）函數時，Chrome會返回一個不同的值。 HTML文件：在Css導致保證金錯誤之前放置JS文件

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="script/jquery.js"></script> 
<script type="text/javascript" src="script/divtest.js"></script> 
<link rel="stylesheet" type="text/css" href="css/divtest1.css"/> 
<title>TEST</title> 
</head> 
<body> 
<div id="canvas"> 
hello 
</div> 
<div id="msg"> 
</div> 
</body>

JavaScript文件：

$(function(){ 
var margin; 
margin=$('#canvas').offset().left; 
$('#msg').html(margin); 
});

CSS文件：

*{ 
margin:0px; 
padding:0px; 
} 
#canvas{ 
margin-left:200px; 
background-color:red; 
width:300px; 
height:300px; 
}

測試頁是http://me.lzu.edu.cn:8080/work/divtest

它看起來在所有瀏覽器不錯，但當我調用offset（）。left時，它們返回不同的值。在IE和Firefox中，它返回200，但在Chrome中返回8. Chrome版本爲41.0.2272.118m。我已經要求我的一些朋友測試此頁面並獲得相同的答案。但是如果我在JS之前放置Css，它們全部返回200.看來，在Chrome中，$（function（）{}）無法按預期工作。我是否誤解了某些事物？我應該停止在Css之前放置JS嗎？非常感謝！

來源

2015-04-05 幽幽子的筷子

jQuery的$(function() { });等同於：

$(document).ready(function() { 
    // wait for dom to be ready before executing code here 
});

Chrome正在執行JavaScript文件偶爾返回的CSS被解析之前的偏移量。您可以嘗試等待完整的窗口對象，以確保通過更改您的JavaScript文件來加載所有子元素：

$(window).load(function() { 
    var margin; 
    margin=$('#canvas').offset().left; 
    $('#msg').html(margin); 
});

來源

2015-04-05 05:53:41 RepeatQuotations

非常感謝。看來我混淆了'$（function（）{}）;'和'$（window）.load（function（）{}）;'。它適用於'$（window）.load（function（）{}）;'。 – 2015-04-05 09:35:43

這兩個很容易混淆，我完全同意。沒問題，祝你好運！ – RepeatQuotations 2015-04-05 11:18:45

在Css導致保證金錯誤之前放置JS文件

回答

相關問題