рендеринг страницы перед выполнением сценария в $ (document) .ready для изменения порядка элементов html

Question

Я перестраиваю некоторые html и изменяю некоторые значения CSS в моем $(document).ready в JQuery. К сожалению, если компьютер пользователя не работает очень быстро, пользователь видит исходный макет, а затем видит, что все перемещается на экране, пока не завершится $(document).ready. Я могу скрыть основной div и показать его в конце $(document).ready, но в зависимости от страницы загружается более одной страницы javascript для каждой html-страницы, и на каждой из этих страниц javascript есть $ ( документ) .ready функция. Так что гарантировать, кто из них выполняет последний, - это еще одно препятствие.

Чтобы добавить больше сложности, я получаю с сервера HTML-фрагмент из 100 участков, каждый из которых содержит изображение. Я покажу только первые n элементов этого фрагмента html и удалю остальные из dom. n рассчитывается на клиенте в JavaScript. Я хочу сделать это до того, как изображения действительно будут извлечены с сервера, поэтому я извлекаю только те изображения, которые отображаются.

Как мне написать свой код так:

1. С сервера извлекаются только те изображения, которые действительно будут отображаться. и
2. Пользователь не видит, как перед ними располагаются элементы страницы.

Большое спасибо!

Answer 1

1) используйте display:none для содержимого в качестве встроенного стиля и покажите их после завершения сценария

2) Оставьте поле SRC пустым и поместите его в data_src, затем скопируйтезначения в SRC, когда вы готовы отобразить

<img src="" data_src="/images/image1.jpg" />

Answer 2

У меня загружено более одной страницы javascript для страницы, и у каждой из них есть функция $ (document) .ready.Так что гарантировать, кто из них выполняет последний, - это еще одно препятствие.

Вы можете иметь только один

$("document").ready({
 //functions here
});

и иметь все функции, определенные внутри него.