У меня есть утилита, которая рисует простую дугу, используя SVG или, как запасной вариант, Canvas. (Раннюю версию можно найти в моем Raphael Arcs Project на моем веб-сайте.
Чтобы разместить мобильное решение, я недавно добавил код для отслеживания размера контейнера и, если он изменится, для повторного - нарисовать изображение, чтобы оно соответствовало контейнеру нового размера. Это добавление использует только размер содержащего DIV; код добавляет объект SVG или Canvas в DIV.
Повторная перезагрузка страницы, однако, иногда макет DIV не не готов, даже когда $ (document) .ready
говорит, что это так. Похоже, это наиболее распространено в Chrome; я видел это только один раз в Opera и никогда в Firefox 3.6. Высота и ширина содержащий DIV возвращается как ноль.
Если вы загрузите ссылку выше в Chrome и нажмете перезагрузку, каждое десятое нажатие или около того, в демонстрации Canvas будет отображаться похожий недостаток: размер будет шириной: 100% от области просмотра, высотой: 300 пикселей, и демонстрация не будет правильно отрисовываться.
Я просмотрел документацию jQuery и, кажется, настаивает на том, чтобы $ (document) .ready ()
должно быть достаточно. Я бы предпочел, чтобы 12% моих пользователей не сталкивались с ошибками, связанными с браузером. Помимо написания моей собственной проверки макета (вращающийся тайм-аут снова и снова спрашивает: «Размер контейнера уже?»), Есть ли общий метод или библиотека, чтобы гарантировать, что не только загружен DOM, но и диспетчер макета установился?
[EDIT]
В итоге я сделал что-то вроде этого (код - 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()
Мне действительно не следовало этого делать.