Показывать div при загрузке страницы (все JS и HTML / CSS) - PullRequest
Новая
       28

Показывать div при загрузке страницы (все JS и HTML / CSS)

4 голосов
/ 03 января 2012

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

Есть ли способ отобразить div, с некоторым текстом, по мере загрузки страницы, а затем отобразить: нет, после?

У меня есть этодо сих пор: 

<script type="text/javascript">
function showContent(){
//hide loading status...
document.getElementById("loading-grid-page").style.display='none';

//show content
document.getElementById("content").style.display='block';
}
</script>
</head>
<body onload="showContent()">
<script type="text/javascript">
document.write('<div id="loading-grid-page">Fetching ALL the gold...</div>');
</script>
<div id="content">
<script type="text/javascript">
//hide content
document.getElementById("content").style.display='none';
</script>

и мой CSS, 

#loading-grid-page {
color: #ffffff;
font: 700 11px/25px 'proxima-nova-1', 'proxima-nova-2', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
background: #111111 url('images/ajax-loader-black.gif') no-repeat 15px center;
border-radius: 2px;
border: 1px solid #111111;
padding: 5px 30px;
text-align: center;
width: 200px;
position: fixed;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -100px;
z-index: 1000000;
}

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

Интересно, есть ли что-нибудь еще;)

Спасибо, R

Ответы [ 4 ]

2 голосов
/ 03 января 2012

Я бы сделал это так:

  1. Загрузите пустую страницу и отобразите загрузчик.Первый раз, когда вы загружаете метод, просто загружаете (y) изображения, для примера 12 будет достаточно.Не загружайте их все.

  2. Используйте (JQuery) Ajax для загрузки контента.Используйте ajax / json для подключения к серверу и подсчитайте количество оставшихся изображений (всего - отображается).if (total> 0) возвращает ссылки на эти изображения в виде массива json.

    ссылка на jquery json call .ссылка на парсинг json с использованием PHP .

  3. Скрыть загрузчик.

    Скройте div, содержащий загрузчик, и добавьте ссылки на div содержимого.

  4. Отобразите содержимое.

    Здесь у вас есть два варианта добавления div или использования уже существующего, но это зависит от того, как вы реализовали код, снова я рекомендую JQuery.

2 голосов
/ 03 января 2012

Это отличное применение для JQuery, если вы хотите, чтобы код запускался при загрузке страницы, сделайте следующее: 

$(window).load(function(){
    //hide loader div here
    $("#loading-grid-page").hide();
});
0 голосов
/ 24 января 2013

Выполните следующие действия:

  1. Создание тега Div, как показано ниже под тегом body.
  2. Включить библиотеку Ext Js на голове как скрипт

  3. создайте тег скрипта и запишите ниже строки в теге скрипта

    Вар Маска; function loadMask (el, flag, msg) { Mask = new Ext.LoadMask (Ext.get (el), {msg: msg}); если (флаг) Mask.show () еще Mask.hide (); }

  4. вызовите функцию beforeload для тега body и вызовите функцию loadMask, как показано ниже javascript: loadMask («myLoading», true, «загрузка ...»)

  5. вызов функции загрузки на теге body и вызов javascript: loadMask ('myLoading', false, 'Loading ...')

если шаг 4 не работает, то создайте новую функцию unloadMask и в этой функции напишите код ниже и вызовите эту функцию при загрузке тега body 

function unloadMask(){ 
 Ext.util.CSS.createStyleSheet(".myloadingjs {\n visibility:hidden;  \n } ", "GoodParts");
}
0 голосов
/ 03 января 2012

Вы можете использовать событие ded domready , чтобы скрыть наложение, когда DOM готов.

...