Скрыть содержимое страницы в IE до полной загрузки скриптов в jquery - PullRequest
Новая
       15

Скрыть содержимое страницы в IE до полной загрузки скриптов в jquery

2 голосов
/ 10 февраля 2011

То есть, мой харчевни ...

Я не хочу, чтобы содержимое моей страницы, контролируемое jquery, отображалось до тех пор, пока jquery не отобразит его.Но в Internet Explorer 7 и 8 контент мигает, прежде чем jquery его захватывает.Я пробовал функции $ (window) .load и $ (document) .ready, но у меня все еще есть та же проблема.

В частности, я не хочу, чтобы мой текст появлялся, пока Cufon не отобразит его, и яне хочу, чтобы поле моей страницы отображалось до тех пор, пока закругленные углы не закруглили углы.Кроме того, у меня есть слайд-шоу с циклом jquery, и все содержимое слайд-шоу отображается на короткое время.

Одним из решений, но я не особенно заинтересован в этом, является быстрое постепенное исчезновение всей проклятой страницы с помощью: 

$(window).load(function(){$("#field").fadeIn(0);});

Даже если время установлено на 0 мс,это все еще работает, чтобы скрытый контент оставался скрытым, пока jquery не отобразит его.Но недостатком является то, что заставляет страницы мигать при навигации между ними.(Я играю с продолжительностью, но с IE, это просто делает страницы пустыми дольше - я никогда, ни разу не смог получить что-либо, чтобы исчезнуть в IE с помощью jquery).

Вот наиболее вовлеченная страница: http://ianmartinphotography.com/test-site/testimonials/index.html О программе и главной (домашней) индексной странице в верхнем каталоге запущены, я все еще работаю над другими вещами ... Спасибо!

Ответы [ 7 ]

2 голосов
/ 10 февраля 2011

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

<script>
document.documentElement.className = "js";
</script>

Затем вы можете использовать CSS, чтобы убедиться, что элементы окончательно скрыты, прежде чем показывать их с помощью JavaScript.

.js .some-element {display: none;}

Это также изящно ухудшается, если JavaScript по какой-то причине не работает.

1 голос
/ 10 февраля 2011 
<html lang="en" class="hideshow">

или 

<html lang="en" style="display:none">

установите для отображения ничего, либо встроенный стиль «display: none», либо в вашем файле CSS

У вас есть jquery в тегах вопросов, поэтому я предполагаю, что вы используете jquery. Если это так, вы можете поместить это в функцию готовности документа 

$(function(){
$('.hideshow').fadeIn("slow").show();
});

или для второго использования. 

$(function(){
$('html').fadeIn("slow").show();
});

Проверьте это на http://jsfiddle.net/NtCKn/

0 голосов
/ 17 февраля 2011

@ Марк Б заслуживает похвалы за это;Я ждал три дня, чтобы он мог опубликовать свою версию ответа, чтобы я мог проверить его.

Вот последний и проверенный код: 

<script type="text/javascript">
 $(document).ready(function(){
 $("THE DIV CONTAINING MY PAGE").css('display', 'block');
 });
</script>

Очень просто и эффективно.

0 голосов
/ 13 февраля 2011

Итак, я просто делаю то, что делал, о чем я упоминал в своем вопросе, просто заставил страницу исчезнуть с помощью jQuery, который дает IE доли секунды, чтобы привести себя в порядок, прежде чем показывать мой Javascript- везет вещи. Я использую: 

$(window).load(function(){$("THE DIV CONTAINING MY PAGE").fadeIn(0);});

... и будет продолжать это делать. @alex предоставил решение в своем ответе, включив в него все html. Это тоже может сработать (я не тестировал его конкретно на рассматриваемой странице, но я все же предпочитаю мое более локализованное появление, поскольку его метод делает все затемнение, включая цвет фона. Я мог видеть, что это действительно здорово на другом сайте, но этот вид не совсем подходит мне на этом сайте ...)

@ Марк Б предложил очень элегантное решение в комментарии под моим вопросом. Я пригласил его перефразировать его как ответ, и если он сработает (и пока что никто не даст лучшей идеи), я его проверю. (Я думаю, что это сработает - я попробую это в следующий раз, когда буду перед моей машиной Windows ...)

Если у кого-то есть другие идеи, я бы хотел их увидеть!

0 голосов
/ 10 февраля 2011

Настройки отображения стиля CSS: нет; Тело или ваш элемент обертки работает хорошо. Имейте в виду, что некоторые вещи не всегда хорошо отображаются при скрытом отображении: нет; В этих случаях вам может понадобиться использовать видимость: скрытый; а затем вернуть элемент к видимости с видимостью: видимым; fadeIn () не будет работать для этого, но обходной путь - .hide () -> visibility: visible, а затем .fadeIn () после того, как документ готов:)

0 голосов
/ 10 февраля 2011

Попробуйте условные комментарии: 

<!--[if IE]>
  <style>
    body {
     display: none;
    }
  </style>
<![endif]-->

и при загрузке удалите это с помощью скрипта: 

<script>
  $(window).load(function(){$('body').css('display:block');});
</script>

Если вам нужна функциональность, когда браузер IE, а JS выключен (прогрессивныйулучшение), первый блок кода станет немного сложнее: 

<head>
<!--[if IE]>
  <style>
    body {
     display: none;
    }
  </style>
  <noscript>
    <style>
     body {
       display: block !important;
     }
    </style>
  </noscript>
<![endif]-->

Это будет скрывать тело, но только когда JS включен (так как второй блок style будет переопределять первый в случаеJS выключен).

0 голосов
/ 10 февраля 2011

Можно ли стилизовать рассматриваемые элементы с помощью display: none;или видимость: скрытая;с CSS, а затем при загрузке страницы использовать jQuery, чтобы показать эти элементы?

...