Лучшая практика для инициализации JavaScript для элементов DOM выше сгиба
Предположим, у вас есть какой-то листинг, и вы позволяете ему отображаться через CSS либо в виде списка, либо в виде сетки (через изменяющийся класс CSS или атрибут данных). Поскольку это чисто проблема рендеринга, она не требует (повторной) обработки веб-сервером, поэтому вы также можете просто внедрить переключатель на стороне клиента с помощью JavaScript.
Однако предположим, что вы хотите сохранить выбор режима просмотра клиента, например, в localStorage, Теперь, когда страница отображается, соответствующий режим просмотра необходимо восстановить.
Но что является лучшим вариантом для того, чтобы предотвратить переход от стандартного представления к сохраненному представлению, чтобы быть видимым, когда содержимое находится выше сгиба?
Рассмотрим следующий пример: http://jsfiddle.net/yaubvq8d/27/
Здесь JavaScript для изменения режима просмотра, а также загрузки сохраненного режима просмотра из localStorage находится в конце тела, что, очевидно, не идеально. Чтобы визуализировать проблему, я также интегрировал загруженный извне JavaScript, который блокирует рендеринг страницы на 2 секунды - так что до того, как на самом деле исполняется JavaScript для управления режимом просмотра, требуется не менее 2 секунд. В течение этих двух секунд вы сначала видите представление по умолчанию (которое представляет собой сетку), а затем оно переключается на то представление, которое вы ранее выбрали (чтобы проверить это, вам, очевидно, сначала нужно нажать "Список", а затем снова запустить скрипку).,
Единственное очевидное решение, о котором я могу подумать, - это определить режим просмотра в родительском контейнере (скажем, в теле), а затем выполнить JavaScript для загрузки режима просмотра из локального хранилища сразу после начального тега родительского контейнера.
Но есть ли другие лучшие практики, которые я мог бы пропустить?