Есть ли что-нибудь более надежное, чем $ (document) .ready ()?

Question

У меня есть утилита, которая рисует простую дугу, используя SVG или, как запасной вариант, Canvas.(Раннюю версию можно найти в моем проекте Raphael Arcs на моем веб-сайте.

Чтобы приспособить мобильное решение, я недавно добавил код для контроля размера контейнера и, если он изменяется, чтобы заново нарисовать изображение, чтобы оно соответствовало контейнеру нового размера. Это дополнение использует только размер содержащего DIV; код добавляет либо объект SVG, либо объект Canvas в DIV.

Повторная перезагрузка страницы, однакоиногда макет DIV не готов, даже когда $(document).ready говорит, что это так. Это кажется наиболее распространенным в Chrome, я видел его только один раз с Opera и никогда с Firefox 3.6. Высота и ширина содержащего DIVвернитесь к нулю.

Если вы загрузите ссылку выше в Chrome и нажмете перезагрузить, каждый десятый удар или около того демоверсия Canvas будет показывать аналогичный недостаток: он будет иметь размер width: 100% viewport, height:300px, и демонстрация не будет отображаться правильно.

Я просмотрел документацию jQuery и, похоже, настаиваю, что $(document).ready() должно быть достаточно.Я бы предпочел, чтобы 12% моих пользователей не сталкивались с ошибками браузера.Кроме написания моего собственного теста макета (вращающийся таймаут, снова и снова спрашивающий: «Контейнер уже размер?»), Есть ли общая методика или библиотека, чтобы гарантировать, что загружен не только DOM, но и менеджер компоновки?

[РЕДАКТИРОВАТЬ]

Я закончил тем, что делал что-то вроде этого (код - Coffeescript):

$(document).ready ->
    $('.wrapper').each ->
        demo = =>
            c = new CanvasArc $('.canvas_demo', this)
            c.sweep(1.0)
            r = new RaphaelArc $('.raphael_demo', this)
            r.sweep(1.0)
        scan = =>
            if $('.canvas_demo', this).height()
                demo()
            else
                setTimeout(scan, 100)
        scan()

Мне действительно не следовало этого делать.

Answer 1

Вы правы, что вам не нужно обойти это.Ответ скрыт в разделе .ready () :

При использовании сценариев, которые полагаются на значение свойств стиля CSS, важно ссылаться на внешние таблицы стилей или вставлять элементы стиляперед ссылками на скрипты.

Так что все, что вам нужно сделать, это сначала включить ваш CSS, а затем ваши скрипты.Таким образом, ваш обработчик готовых событий даже не устанавливается до тех пор, пока не будет загружен CSS.

Answer 2

ready - это событие, которое означает, что DOM готов к написанию сценариев, то есть все элементы существуют с их основными свойствами, и вы можете добавлять / удалять элементы и т. Д., Но не все элементы визуализируются. Используйте window.onload (load в jQuery), если вы хотите быть уверены, что все «загруженные ресурсы» полностью завершили загрузку всего контента, включая изображения и, возможно, другой встроенный контент, для загрузки которого требуется время.

Страница готовности jQuery говорит:

В случаях, когда код опирается на загруженные ресурсы, вместо этого код должен быть помещен в обработчик для события загрузки.

Является ли содержимое div, которое вы просматриваете, "загруженными активами"? Если это так, то их загрузка может изменить размер div после события ready. Теоретически, тогда вы сможете использовать asset.load для ответа, как только определенный загруженный ресурс завершит загрузку. Используйте document.ready, чтобы подключить это событие.

Answer 3

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

Answer 4

вы не должны полагаться на сценарий для определения размера вашего div, а скорее позволять ему изменять размер с помощью CSS, с шириной в процентах, таким образом, для документа, готового, он уже будет иметь размер.