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

Question

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

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