1

Привет, прошу прощения за избитый вопрос, но всё же столкнулся с проблемой:

Всегда вешал весь фронтэнд на $(document).ready(function(){ /* js */ }); и всё работало прекрасно, но тут столкнулся с проблемой определения высоты у колонок в при помощи $('#element').height(); и я заметил что высота определяется по разному. Иногда до применения стилей css (!sic), иногда после применения css. (стили подключаются в хедере до jQuery). Собственно сами вопросы:

1) Когда срабатывает $(document).ready, на готовность только DOM дерева без применения стилей? как в таком случае ведут себя "инлайн стили" без css типа <p class="super__padding" style="padding: 100px 50px;"></p> ?

2) Когда срабатывает $(window).load? Как я понимаю когда загрузятся все объекты включая всю графику <img />?, включена ли сюда графика css background-image: url();? а если она прописана "инлайн" в теге style=""? Включен ли сюда "кроссдомен"? (имею ввиду фреймы шаринга соцсетей, гугл аналитикс и тд)

3) Мне нужно определить некие "визуальный" параметры у некоторых элементов, такие как (width, height) учитывая загруженные стили и шрифты, но не хотелось бы ждать window.load как поступить?

P.S> CSS имеет несколько загружаемых шрифтов что также вливает на размер и высоту блоков. Уверен информация будет полезна всем!

2 ответа 2

3

1) $(document).ready реагирует на полное построение только DOM дерева, при этом инлайн-стили применяются сразу во время построения, в отличие от внешних стилей. Этот способ не ожидает загрузку внешних стилей, картинок, содержимого фреймов и т.д.

2) $(window).load ожидает загрузку всего: картинки, внешние стили, фреймы и т.д. При этом учитываются все элементы, которые могут как-то повлиять на разметку и только после этого срабатывает. Я так понимаю это требование должно ожидать и загрузку background-image: url().

3) Такие способы мне не известны.

1

По пункту 3: Событие onload можно биндить не только на body, но и на некоторые другие элементы, в т.ч. на img, link, style. Размеры картинок можно определять на сервере и указывать в атрибутах img.

Есть плагин для отслеживания загрузки картинок внутри элемента: http://www.cirkuit.net/projects/jquery/onImagesLoad/

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.