окно.внутренняя ширина = 0?

Я делаю веб-страницу холста для анимации.Странно то, что каждый раз, когда я запускаю веб-страницу, дважды щелкнув файл html, размер холста почти всегда будет неправильным. Я уже публиковал аналогичный вопрос:Неправильный размер холста при загрузке , но нет желаемого ответа.

После обширной отладки я обнаружил, что это window.innerWidthдоставляет мне такие проблемы. window.innerWidthвозвращает 0 каждый раз, когда страница запускается двойным щелчком по файлу html и приводит к неправильному размеру холста (интересно, что размер холста не совсем 0, а очень маленький, на котором есть объект для рендеринга. поверх друг друга ), но после перезагрузки страницы (Ctrl+R )проблема больше не возникает. Я использую jQuery для загрузки страницы, вот мой код:

html:

js:

    $(document).ready(function() {

        var SCREEN_WIDTH = window.innerWidth-10,
            SCREEN_HEIGHT = window.innerHeight-10;

        if (window.innerWidth === 0) { alert("wtf? width = 0?");}

        var canvas = $('canvas')[0],
            context;

        init(); // use $(window).load(init) does not fix the problem

        function init() {

            if (canvas.getContext) {

                context = canvas.getContext('2d');
        animate(); // draw stuff
            }

            else {
                alert('Your browser does not support html5 canvas');
            }
        }
});

Как вы можете видеть здесь, я уже использую $(docuemnt).ready(function()), чтобы убедиться, что все загружается, однако по ссылкеhttp://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/автор предполагает, что событие готовности документа выполняется уже тогда, когда документ HTML -загружен и DOM готов, даже если вся графика еще не загружена.

С другой стороны, $(window).load(function())выполняется немного позже, когда вся страница полностью загружена, включая все кадры, объекты и изображения. Поэтому функции, которые касаются изображений или другого содержимого страницы, должны быть помещены в событие загрузки для окна или самого тега содержимого. Но даже я использую это проблема не решена.

Возможно, файл js запрашивает ширину окна перед его загрузкой, но я не могу найти жизнеспособного решения. Может кто-нибудь помочь с этим?