$ (document).ready() срабатывает слишком рано

Итак, мне нужно знать ширину элемента с javascript, проблема заключается в том, что функция срабатывает слишком рано, а ширина изменяется, когда css используется для изменения. Как я понял, функция $(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>

Я хочу знать ширину div #target, проблема в том, что код, выполняемый перед предупреждением, дает другой результат, чем тот, который после, по-видимому, потому, что шрифт не полностью загружен и он измеряет div с помощью шрифт по умолчанию.

Он работает так, как я ожидаю, в Google Chrome, но он не работает в IE и Firefox.

Ответ 1

Если вы полагаетесь на внешний контент, который уже загружен (например, изображения, шрифты), вам нужно использовать событие window.load

$(window).load(function() {
    // code here
});

Поведение этих событий описано в этой статье.

Ответ 2

Цитата OP:

"Как я понял, функция $(document).ready() была запущена, когда документ завершен,"

$(document).ready() срабатывает, когда DOM ( "объектная модель документа" ) полностью загружена и готова к работе. DOM не совпадает с "документом".

Часто задаваемые вопросы W3C - DOM

Вместо этого вы можете попробовать $(window).load() функцию...

$(window).load(function() {
    // your code
});

Он будет ожидать полной загрузки всех ресурсов страницы (например, изображений и шрифтов и т.д.) до начала стрельбы.

Ответ 3

Функция jQuery.ready() запускается, как только DOM завершается. Это не означает, что в этот момент были загружены все активы (например, изображения, CSS и т.д.), И, следовательно, размер элементов может быть изменен.

Используйте $(window).load(), если вам нужен размер элемента.

Ответ 4

Событие "готово" срабатывает при загрузке DOM, что означает, что можно безопасно работать с разметкой.

Чтобы дождаться загрузки всех ресурсов (css, images, external javascript...), вы предпочтете использовать событие загрузки.

$(window).load(function() {
    ...
});

Ответ 5

Вы можете использовать $(window).load(), но это будет ждать всех ресурсов (например, изображений и т.д.). Если вы хотите только дождаться загрузки шрифта, вы можете попробовать что-то вроде этого:

<script type="text/javascript"> 
    var isFontLoaded = false;
    var isDocumentReady = false;
    $("link[href*=fonts.googleapis.com]").load(function () {
        isFontLoaded = true;
        if (isDocumentReady) {
            init();
        }
    });
    $(document).ready(function () {
        isDocumentReady = true;
        if (isFontLoaded) {
            init();
        }
    });
    function init () {
        // do something with $('#target').outerWidth()
    }
</script>

Отказ от ответственности: я не совсем уверен, что это сработает. Событие on <link> onload может быть запущено, как только таблица стилей будет разобрана, но до того, как будут загружены ее внешние ресурсы. Возможно, вы могли бы добавить скрытый <img src="fontFile.eot" /> и вместо этого поставить обработчик onload на изображение.

Ответ 6

Я абсолютно, повторяю, видел ту же проблему в IE9 и IE10. Вызов jquery ready() и один из моего <div> не существует. Если я обнаружил это, а затем снова позвоню после кратковременного таймаута(), он отлично работает.

Мое решение, чтобы быть в безопасности, было в два раза:

В конце документа добавьте <script> window.fullyLoaded = true; </script> в конце документа, затем проверьте эту переменную в обратном вызове ready(), AND
Убедитесь, что $('# lastElementInTheDocument'). length > 0

Да, я понимаю, что это неприятные хаки. Однако, когда ready() не работает, как ожидается, потребуется какая-то работа!

Как вариант, "правильное" решение, вероятно, связано с установкой $.holdReady в заголовке и очисткой его в конце документа. Но, конечно, действительно-правильное решение для ready() для работы.

Ответ 7

Проблема $(document).ready() срабатывает слишком рано может произойти иногда, потому что вы неправильно объявили функцию jQuery onReady.

Если возникают проблемы, убедитесь, что ваша функция объявлена точно так:

 $(document).ready(function() 
 {
   // put your code here for what you want to do when the page loads.
 });

Например, если вы забыли часть анонимной функции, код все равно будет работать, но он будет работать "не в порядке".

console.log('1');
$(document).ready()
{
  console.log('3');
}
console.log('2');

это выведет

1
3
2