JQuery скрытые элементы, видимые при загрузке страницы

Question

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

Answer 1

Добавить следующий CSS:

.counties-container{ 
    display:none; 
} 

#st-c .counties-container{ 
    display:block; 
} 

Удалить foloowing часть из ваших map.js:

//this function hides each <div class="counties-container"> and is called onload and when the user selects a region 

//ONLOAD - these several lines are used to help with graceful degradation (when the user doesn't have JavaScript enabled) 
hideall(); //initiate the hideall function 
jQuery('#st-c').css("display","block"); 

Это должно решить проблему

Answer 2

Я думаю, вы могли бы просто добавить этот атрибут для каждого элемента, который вы не хотите, чтобы получить отображается:

стиль = «дисплей: нет;»

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

стиль = «видимость: скрытый;»

Если это не представляется возможным сделать это таким образом, вы могли бы попытаться добавить это как-то с JQuery.

Answer 3

Проще всего добавить «display: none» в ваш css, а затем .show() в вашем скрипте.

Answer 4

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

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

Если вы пытаетесь это скрыть, то после того, как он загружался, показать его, рассмотреть вопрос об использовании метода load() если вы выборки данных из службы или страницы внутри вашего решения, или вы можете также использовать ready() метод вашего элемента DOM.

Ссылки из JQuery официальной документации для обоих методов:

Loadhttp://api.jquery.com/load/

readyhttp://api.jquery.com/ready/

Дай мне знать, если это помогло вам.