Скрыть div во время загрузки страницы?

Question

Итак, у меня есть один div, который загружает смешные, и мой клиент немного обеспокоен этим, но я хочу помочь им.

Есть ли способ скрыть div для заданного времени с помощью jQuery? вероятно, просто непрозрачность: 0 на загрузке страницы, затем на 2 секунды, измените ее на непрозрачность: 1.

Альтернативой может быть добавление/удаление метода класса. Я просто не уверен, что код будет иметь его в одном состоянии, а при загрузке страницы, то в другом состоянии неопределенно долго (если страница не обновляется, конечно), так что-то вроде

jQuery('#DIV').WHILELOADING(function() { 
    jQuery('#DIV').addClass('hidden_div') 
}); 

jQuery('#DIV').AFTER_2_SECONDS(function() { 
    jQuery('#DIV').removeClass('hidden_div') 
}); 

Я просто не «полностью» уверен, как это сделать. Кроме того, «экран загрузки», который я знаю, как это сделать, не может быть и речи, lol. : P

Answer 1

Как это ДИВ загружается, если это страница загрузки, то просто т он Див скрытый на странице загрузки и показать DIV внутри

jQuery(window).load (function() { 
     jQuery('#DIV').removeClass('hidden_div') 
    }); 

Если вы загружаете DIV с помощью .load (AJAX вызов), а затем используется .load обратного вызова, чтобы показать DIV.

jQuery('#DIV').load('<URL>', function() { 
    jQuery('#DIV').removeClass('hidden_div') 
}); 

Выше два, как при условии, что у вас есть div скрытые, как показано ниже,

<div id="DIV" class="hidden_div"><!-- div content --> </div> 

Примечание: Добавление задержка не может дать вам последовательный результата. Например: если задержка составляет 5 секунд, а страница занимает 10 секунд, то у вас будет такая же проблема.

Он просто загружается PHP сгенерированным HTML, а не jQuery. Я следую за первым комментарием , так что-то вроде этого? "jQuery ('# DIV'). Delay (1000) .removeClass ('hidden_div');"

Если это код сгенерированный php, то эхо код removeClass в конце генерирующего кода.

Answer 2

этот код с Jquery сайта апи на delay()

$('#myDiv').slideUp(300).delay(800).fadeIn(400); 

jsfiddle: http://jsfiddle.net/NNQ4f/

Answer 3

$(document).ready(function(){ 

    $('#div') 
    .css({opacity:0}) /*set opacity to 0*/ 
    .delay(2E0) /*wait 2 seconds*/ 
    .animate({opacity:1}); /*animate in opacity*/ 

}); 

альтернативно

$(document).ready(function(){ 

    $('#div') 
    .css({opacity:0}) /*set opacity to 0*/ 

    //wait for body to load 
    $('body').bind('load', function(){ 
    $('#div').animate({opacity:1}); /*animate in opacity*/ 
    }); 

}); 

Answer 4

Чтобы избежать мерцания при загрузке, я d рекомендую сделать начальную шкуру с помощью CSS

#div { display: none; } 

Затем, чтобы отобразить использование Дива JS

function showDiv() { 
    $('#div').show(); 
} 

setTimeout(showDiv, 2000); 

Answer 5

Почему бы не установить дисплей свойство сНа инлайн к «ни», а затем, когда документ загружен отображению продолжительности DIV?

<div id="mydiv" style="display:none;"> </div> 



$(document).ready(function() { 
$('#mydiv').show(); 
}); 

Answer 6

Сначала вы можете скрыть его с помощью JQuery (или CSS, но вот что-то большинство людей не любят делать), а затем вызвать метод показа, как только страница загрузится Вы можете попробовать окружив его:

$(document).ready(function(){ 
     $("#DIV").hide(); 
    } 

, а затем к нижней части страницы (хотя это не имеет значения, где на самом деле):

$(window).load(function(){ 
    $("#DIV").show(); or .fadeIn(); 
    }); 

Answer 7

Я бы спрятал div сначала, тогда вы можете установить таймер, чтобы удалить класс или использовать .fadeTo, чтобы показать его медленно (другое финиширование, а не просто свопинг к нему, вам также нужно установить параметры непрозрачности). Но, по моему личному мнению, я думаю, что может быть, что страница может быть переработана, чтобы выглядеть правильно в первый раз или найти какую-то другую схему, не ориентированную на часы, чтобы изменить представление после того, как это произойдет.

Что-то вроде:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    setTimeout($('#DIV').removeClass('hide'), 3000); 
    }); 
</script> 
<style type="text/css"> 
    div#DIV .hide { 
     display: none !important; 
    } 
</style> 

[...] 

<div id="DIV" class="hide"></div> 

Синтаксис не проверено.

Приветствия, ~ M

Answer 8

Во-первых, установить содержание для не пользователей ЯШ:

<body class="no-js"> 
    <div id="div">Content</div> 
</body> 

Затем удалите класс и показать контейнер.

$(document).ready(function() { 
    // Remove no js class 
    $('body').removeClass('no-js'); 
    // Show and animate div container 
    $('#div').hide().delay(2000).fadeIn(); 
}); 

Answer 9

jsFiddle Example

Я хотел бы использовать $(document).ready(); добавить вы класс CSS, а затем $(window).load();, чтобы удалить его.

$(document).ready(function(){ 
    $('#DIV').addClass('hidden_div'); 
}); 
$(window).load(function(){ 
    $('#DIV').removeClass('hidden_div'); 
}); 

Answer 10

Все методы здесь не работают, я проверил их. JQuery слишком медленно, чтобы скрыть что-то, прежде чем пользователь сможет его увидеть, потому что код должен быть в функции DOM ready. Самый простой и быстрый способ: поместите элемент, который нужно скрыть в div, и добавьте js в верхнюю часть этого div, чтобы скрыть его во время loding, этот способ также безопасен для пользователей без js! (Протестировано в IE, хром, фф, последняя версия 05.2013):

Пример, чтобы скрыть DIV:

<div id="content"> 
    <script type="text/javascript"> 
      // Get the div and hide it 
      var div = document.getElementById('content'); 
      div.style.display = 'none'; 
      //Shows the div as soon as the page is loaded 
      window.onload = function() { 
      div.style.display = 'block';} 
    </script> 
    // Content that needs to be hidden 
</div> 

Приветствия