Jquery, скрыть содержимое до загрузки

В настоящее время я использую этот script для ускорения перехода страницы:

$(document).ready(function() {

    $(window).bind("unload", function() {});
    $("body").css("display", "none");

    $("body").hide();

    $("body").fadeIn(2000);

    $('a.fade1, a.fade2, a.fade3, a.fade4').click(function(event) {
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(700, redirectPage);
    });

    function redirectPage() {
        window.location = linkLocation;
    }

});

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

поэтому мне нужен способ скрыть контент до полной загрузки и только после этого пусть он будет исчезать в

надеюсь, что кто-то может мне помочь, спасибо заранее

Ответ 1

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

CSS

body {
  display: none;
}

JQuery

$(window).load(function() {
  // When the page has loaded
  $("body").fadeIn(2000);
});

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

См. событие загрузки.

Вы также можете заменить свои классы "fadeX" на один класс, что-то вроде "fade"

Ответ 2

Почему бы не поместить все начальные css, используя... CSS?

<head>
<!-- some stuff of yours -->
<style>body{display:none}</style>
</head>
<body>
</body>

Тогда ваш js должен беспокоиться только о вызове fadeIn(). Таким образом, когда браузер отображает тэг <body>, он уже знает, чтобы скрыть его, поэтому он не будет отображаться вообще, пока ваш fadeIn() не будет вызван.

Ответ 3

На самом деле я бы не использовал CSS для начала, и вот почему. Если по какой-то причине JS не загружается на страницу, она также не сможет отобразить содержимое вашей страницы. Я бы сохранил все в script и записал в DOM, поэтому, если он терпит неудачу, ничего не происходит.

<script>
document.write('<style>body { visibility: hidden; } </style>');
</script>

<script type="text/javascript">
jQuery(document).ready(function(){
    delay();
});

function delay() {
    var secs = 1000;
    setTimeout('initFadeIn()', secs);
}

function initFadeIn() {
    jQuery("body").css("visibility","visible");
    jQuery("body").css("display","none");
    jQuery("body").fadeIn(1200);
}
</script>

Ответ 4

CSS для каждого изображения: видимость: скрытая;

jQuery.ready: видимость: видимая; (или используйте затухание или что угодно). Почему visibility вместо "отображения"? display будет делать много "прыжков" и "сбоев" на вашей странице при загрузке элементов.

Кроме того, вы можете использовать метод загрузки jQuery вместо ready.