Страница загрузки страницы, вызывающая ошибки

Question

В настоящее время я создаю веб-страницу с помощью HTML/CSS и jQuery/Basic JS. Я использую код JQuery, чтобы показать GIF изображение в то время как веб-сайт загружается

$(window).load(function() { 
    $(".loading").fadeOut(700, function() { 
     $(".Content").fadeIn(700); 
    }); 
}); 

У меня есть DIV с классом «Content» (который начинается с «дисплей: нет») и весь мой сайт находится внутри этот тег, все будет отображаться после выполнения этой функции.

Проблема в том, что я понял, что этот скрипт создает неожиданные побочные эффекты с другими кодами JS/jQuery. Например, я использовал этот скрипт http://pixelcog.github.io/parallax.js/ для создания эффектов параллакса. Ошибка: Изображение не появлялось вообще, когда я изменяю размер окна браузера, изображение внезапно появляется, и все начинает работать отлично (то же самое в Google Chrome и Firefox). Если я выключу скрипт загрузки, он отлично работает.

Вторая проблема: я также тестировал скрипт API Карт Google (http://www.w3schools.com/googleapi/google_maps_basic.asp), чтобы включить карту в DIV и столкнулся с той же проблемой. Я даже мог видеть интервал DIV, но все пустое, изменило размер браузера (независимо от того, в каком направлении), и он начинает работать.

Я подозреваю, что, возможно, я делаю эту вещь не по-другому, но это первый раз, когда я использую это. Может ли кто-нибудь сказать мне, что случилось?

Answer 1

Если вам абсолютно необходимо показать индикатор загрузки, я думаю, что лучше не скрывать ваш контент через display: none.

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

.loading-wrapper { 
    position: fixed; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background: white; 
    z-index: 999; /* depends on your situation */ 
} 

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