неправильный расчет ширины с использованием outerWidth() в google chrome [onload]

Question

У меня есть панель навигации (topmenu) внутри div. Я должен скрыть остальные элементы меню, если ширина меню больше, чем ширина внешнего div. К сожалению, я не могу использовать overflow:hidden для div. Поэтому я использую функцию .outerWidth() для вычисления общей ширины div и ширины каждого elment (li) и скрыть элементы переполнения. Поэтому моя проблема заключается в том, что он отлично работает в firefox (19.0), IE (8) !, но не в хроме. В хроме все элементы скрыты. Проблема решает, когда я изменить

$(document).ready(function() {}); в $(window).load(function() {});

Но тогда, общая уль показана на долю секунды, то получить скрытые (IE, FF он все еще работает отлично). Есть ли лучшее решение для этого? Или любая другая логика.

Образец

<div style="width:300px;" > 
<ul id="menu1"> 
    <li class="noChild "><a href="#" >3 Option</a></li> 
    <li class="noChild"><a href="#" >2 Option</a></li> 
    <li class="noChild "><a href="#" >1 Option</a></li> 
</ul> 
</div > 

http://jsfiddle.net/RSA3X/4/

similar case of mine

Answer 1

На самом деле решение было простым. Я усложнил ситуацию. В приведенном ниже изображении мы также видим процесс загрузки скрипта, изображения и css. В моем случае я добавил ссылку выше скрипт CSS как

<script type='text/javascript' src='jquery.js'></script> 
<script type='text/javascript' src='menu.js'></script> 
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 

и его нагрузки, как изображение 2. так что мой сценарий выполняется до загрузки CSS. И я не смог получить свойства css.

Когда я изменил позицию, как

<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
    <script type='text/javascript' src='jquery.js'></script> 
    <script type='text/javascript' src='menu.js'></script> 

Мой сценарий выполняется после завершения загружающего CSS (изображение 1). Итак, теперь он работает отлично.