Прогрессивное улучшение, поведение, когда страницы еще не полностью загружены

Question

Я разрабатываю сайты, используя прогрессивное улучшение, полностью реализованное в jQuery.

Например, я динамически добавляю обработчики событий onclick к тегам привязки для "встроенного" воспроизведения связанных MP3-файлов с помощью SoundManager и запускаю проигрыватели Youtube для ссылок на Youtube через $ (document).готово (функция()).

Однако, если пользователь нажимает на них во время загрузки страницы, он по-прежнему получает не улучшенную версию.

Я думал о том, чтобы скрыть соответствующие материалы (с помощью display:нет, или что-то в этом роде) и показывать его при загрузке, или помещать модальное диалоговое окно "загрузка", но и то, и другое звучит как взломы.

Есть идеи получше?Я чувствую, что упускаю здесь что-то совершенно очевидное.

С уважением,

Алекс

Answer 1

Я не тестировал это, но вы могли бы попробовать live.Идея заключается в том, что вы могли бы поместить свои обработчики кликов за пределы document.ready, чтобы они выполнялись сразу.С тех пор как live использование делегирование мероприятий чтобы реализовать его функциональность, вам на самом деле не нужно ждать, пока DOM будет готов, и любые щелчки, сделанные во время загрузки страницы, все равно должны фиксироваться обработчиком событий.

Если это не сработает, вы могли бы попробовать поместить теги скрипта Javascript непосредственно под тем, что им нужно для привязки.Это некрасиво, но в значительной степени устранит проблему.

Answer 2

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

Однако моя первая реакция заключается в том, что если пользователь может щелкнуть по нему во время загрузки страницы, значит, ваша страница или соединение работают слишком медленно.Однако, если это случается редко - менее чем в 1% случаев, - тогда вы можете не обращать на это внимания до тех пор, пока пользователь может достигать своей цели, то есть слушать свою музыку.Я говорю это потому, что, как только пользователь понимает, что через полсекунды его ждет лучший интерфейс, он обычно ожидает рендеринга Javascript, а затем нажимает.

Answer 3

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

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

Однако, я делай согласитесь с aleemb, что если ваши пользователи способны мысленно обработать страницу и перейти к элементу управления, который они хотят щелкнуть, до загрузки вашего js, то, вероятно, существует более глубокая проблема со способом загрузки вашей страницы.Изучите способы сокращения времени загрузки:сжатие файлов изображений, сжатие файлов html / css / js, сокращение вашего javascript, объединение изображений в спрайты и т.д.

Answer 4

Я бы предложил следующее Совет Паоло Бергантино - делегирование событий - это способ полностью избежать проблемы.

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