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

Question

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

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

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

Я думал о том, чтобы спрятать соответствующий материал (через отображение: ничего или что-то в этом роде) и показать его при загрузке, или выставить модальное диалоговое окно «загрузки», но оба звучат как хаки.

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

С уважением,

Alex

Answer 1

Я не проверял это, но вы можете попробовать live. Мысль заключается в том, что вы можете поместить свои обработчики кликов за пределы документа. Уже так, чтобы они выполнялись сразу. Поскольку live использует делегирование события для достижения его функциональности, вам не нужно ждать, пока DOM будет готов, и любые щелчки, сделанные во время загрузки страницы, должны по-прежнему регистрироваться обработчик событий.

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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