Более чистый способ отключить страницу до загрузки javascript?

У меня есть страница, на которой нужно загрузить 3 файла javascript (что довольно много), прежде чем все элементы страницы станут доступными. Если щелкнуть одну из ссылок, загрузка остановится, и вся страница не загрузит скрипт правильно.

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

$(".black-overlay").show();

который является div, который маскирует всю мою страницу с z-индексом 9999. Затем, после загрузки страницы, я помещаю

$(function() { $(".black-overlay").hide(); });

который из источников, которые я читал, совпадает с функцией готовности документа, поэтому наложение исчезает после загрузки страницы.

Моя проблема в том, что это работает только иногда. В одном случае наложение пропало, но ссылка все еще не работает (значит, скрипт еще не загружен). Другой случай: иногда оверлей не отображается, если: я перехожу на другую страницу, затем возвращаюсь на главную страницу, на главной странице оверлей должен был отображаться снова, поскольку скрипт должен был загрузиться снова. Но иногда это срабатывает просто отлично.

Есть ли более чистое решение этой проблемы?

[РЕДАКТИРОВАТЬ] Это происходит, особенно если интернет-соединение с сайтом очень медленное.


overlay jquery
person user2002495    schedule 21.08.2013    source источник
comment
Вы должны использовать $(window).load( function() { // your function });   -  person Muhammad Talha Akbar    schedule 21.08.2013
comment
Вы использовали $ до загрузки jQuery? Если вы хотите, чтобы ваши пользователи видели черный экран до тех пор, пока не загрузятся все скрипты, вам не нужен javascript для включения черного экрана, просто покажите черный экран, а затем jQuery(document).ready(function($){$(".black-overlay").hide();});   -  person Александр Фишер    schedule 21.08.2013
comment
@FakeRainBrigand оставь его, я думаю, eric.itzhak уже ответил, плюс это абсолютно правильно.   -  person Muhammad Talha Akbar    schedule 21.08.2013

Ответы (1)


arrow_upward
3
arrow_downward

Я бы сделал тело скрытым по умолчанию, то есть: <body style="display:none;"> и при загрузке документа сделало бы его видимым (вы даже можете fadein, что всегда весело):

$(document).load( function() { $('body').fadeIn(); });

Поместите его в свой код как можно более свежим, и он (надеюсь) всегда будет работать.

person eric.itzhak    schedule 21.08.2013
comment
Спасибо, все работает нормально, но мой вопрос: мне нужно изменить document на window. Будет ли проблема изменить это? - person user2002495; 21.08.2013
comment
Прочтите это: stackoverflow.com/questions/8396407/ - person eric.itzhak; 21.08.2013
comment
Спасибо за ссылку. Мне нужно изменить его, потому что по какой-то причине (которой я не знаю) использование document не работает, display:none все еще там. - person user2002495; 21.08.2013