JS effect util страница загружается

-1

Я хочу сделать полностью белый фон с загрузочной панелью или что-то использовать видео/изображения/скрипты, полностью загруженные. И после загрузки я хочу добавить эффект FadeIn от animate.css ко всем элементам тела.JS effect util страница загружается

Я хочу загрузку страницы сценария, как this

источник

2015-06-05 hope

HTTP : //tympanus.net/codrops/2014/08/05/page-preloading-effect/ Быстрый поиск в Google даст вам долгий путь – Mark

Я ищу человека ... спасибо в любом случае. – hope

вы можете найти здесь загрузчиков http://codepen.io/collection/HtAne/ - как для обычного контента вы используете ajax для загрузки страницы, которая сообщает вам, когда функция завершается, чтобы вы могли удалить загрузчик и исчезнуть на странице , если у вас есть изображения, то вы можете использовать функцию предварительного натяжения изображения, чтобы вы знали, когда они тоже закончили загрузку. или вы можете использовать подключение - https://github.com/desandro/imagesloaded – Tasos

простейших алгоритма для вашего случая. Предположим, у вас есть этот HTML.

<body> 
    <div class="preloader"> 
     <span></span> 
    </div> 
    <div class="wrapper initial"> 
     <p>Lorem ipsum dolor sit amet.</p> 
    </div> 
</body>

1) Положите такие CSS стиль в таблице стилей

.wrapper { 
    text-align:center; 
    padding:50px; 
} 

.initial { 
    display:none; 
} 

.preloader { 
    position:absolute; 
    width:100%; 
    height:100%; 
} 

.preloader span { 
    display:block; 
    margin : 70px auto; 
    width : 100px; 
    height : 100px; 
    background : url('http://www.firstimpressionsdentistry.com/images/animated_preloader.gif') 50% 50% no-repeat; 
}

2) Добавить файл JS с таким содержанием, для простоты я буду использовать JQuery

$(document).ready(function() { 

    //display(); // uncomment this if you want to display immediately 

    setTimeout(function() { 
     display(); // example with custom delay 
    }, 5000) 
}) 

function display() { 

    var wrapper = $('.initial'); 
    var loader = $('.preloader'); 

    loader.fadeOut(2000); 

    wrapper.fadeIn(4000, function() { 
     wrapper.removeClass('initial'); 
    }); 
}

источник

2015-06-05 17:44:58 Anonymous

И если страница загружается быстро? Может добавить 2-3 продолжительности секунды? – hope

Dosen't work. Страница остается полностью белой. – hope

@hope: хорошо, вот рабочий пример - https://jsfiddle.net/5xwLcxju/ – Anonymous

JS effect util страница загружается

ответ

Смежные вопросы