Создание видимого нагрузка Предзагрузчик Page

Question

Попытка репликации предварительного загрузчика page при загрузке SVG и появляется фоновое изображение, и как только пользователь прокручивает страницу, прокручивается содержимое, а страница-загрузчик не видна или может быть достигнуто снова, если вы не обновите страницу, не знаете, как справиться с этим, любая помощь, чтобы указать мне в правильном направлении, была бы замечательной - я попытался избавиться от указанной страницы.

Answer 1

Есть несколько способов сделать это, простой отправной точкой может быть что-то вроде этого:

основной HTML план:

<div id="loader"> 
LOADING Image/content 
</div> 

<div id="body"> 
website body 
</div> 

CSS

#body{display:none;} 

JQuery

$(document).ready(function(){ 
$("#loader").hide(); 
$("#body").show(); 
}); 

NoScript запасной вариант

<noscript> 
<style>#loader{display:none;}#body{display:block !important;}</style> 
</noscript> 

В принципе, этот код имеет две дивы загрузчиком и тело, тело устанавливается в качестве дисплея ни в CSS. Когда страница готова, jquery запускается, чтобы скрыть загрузчик и показать тело.

Откат noscript приведет к тому, что тело станет видимым, если javascript отключен.

Существует несколько способов достижения, это всего лишь одна идея.

Answer 2

Из одного из сотни различных способов, мои первые мысли были по этим линиям:

• Оберните основное содержание в обертке с позицией относительным и дать ему смещение от вершины на 100% от ширина окна
• Сделать страницу-погрузчик 100% высота и ширина и положение фиксированного
• смещение обертку до полной загрузки страницы, а затем просто переход его в 0 смещения как только страница была загружена

See a working jsfiddle here

Answer 3

1. Создайте элемент (Div), который охватывает весь экран.
2. За ним (меньший z-индекс) добавьте контейнер Div, содержащий все изображения.

3. Добавить в JavaScript функцию события загрузки для всех изображений:

   image.onload = функция() {
   // изображение было загружено

   }

4. Скрыть крышку Div, когда все изображения были загружены.

5. Как узнать, когда были загружены все изображения? добавьте счетчик или используйте Promise.
6. Добавить переполнение: нет, чтобы отключить прокрутку и добавить событие события клика или прокрутки (с помощью jQuery) и установить переполнение в auto.

Существует множество способов реализации каждого из этих разделов.